Interfaz WEB, primero familiarizado con vue.js
Uno, puntos de conocimiento vue
vue.js es un marco front-end con procesamiento de datos como núcleo, que tiene las características de enlace de datos eficiente y aplicación de componentes flexible (modularización, component.vue)
模式1:MVVM(vue.js)
M :model 数据层
V: view 视图层(html+css)
VM:viewModel 薄片层:是链接数据层和视图层的薄片层(vue的实例 )
模式2:MVC
M:model 数据层
V:view 视图层(html+css)
C:controller控制层(js代码)
En segundo lugar, instanciación de vue
Plantilla básica
<body>
<div id="app">
{
{
msg}}//hello
<button v-on:click="show()">点击</button>
<div :class="color" @click="show()">show方法展示</div>
</div>
</body>
<script>
var a= new Vue({
el:"#app",//document.getElementById("#aa");//挂载节点
data:{
//数据
msg:"hello ",
},
methods: {
//方法
show(){
alert("hi");//弹出框hi
},
},
computed:{
},//计算方法
filters:{
},//过滤方法
});
</script>
Uso de instrucción básica
v-model:双向绑定 可作用与input中value使用
v-if:控制css属性的消失隐藏
v-else:扩展是v-else-if
v-show:控制dome节点的删除和增加来实现消失隐藏
v-for:遍历
v-text:可以简写为{
{}},并且支持逻辑运算
v-html: 用于输出html
Azúcar sintáctica
v-on:click(事件)="show()" 事件绑定——>@click="show()"
v-bind 动态绑定 url class style href ... ——>:class=""