Vue.js第一天(下)

1.每个 Vue 应用都需要通过实例化 Vue 来实现。

var  xx=new Vue({
     //write some thing
 })

2.Vue的模板语法:

(1)插值:数据绑定最常见的形式就是使用 {{…}}(双大括号)的文本插值
例如:div id="myDemo">{{message}}</div>
(2)指令:指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时,将某些行为应用到 DOM 上。

下面是这两天接触到的简单的带有v-前缀的特殊属性:
》1.v-if和v-for:
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 div元素。
v-for指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。可以绑定数据到数组来渲染一个列表。
例:这里写图片描述
》2.v-model:
v-model 指令在表单控件元素上创建双向数据绑定。(这里只是个简单的例子,它还可以与复选框type=’textarea’以及type=’radio’等表单控件进行数据绑定)
这里写图片描述
例:此处与复选框进行绑定:
这里写图片描述
》3. v-on:
v-on 指令,它用于监听 DOM 事件(在实际例子中的v-on:(event)可以缩写为@(event)。
例:
这里写图片描述
》4.v-bind:
v-bind指令可以缩写为一个冒号
(这里要提及的是class的绑定)
即v-bind:class(为HTML标记绑定样式class属性:
例:
这里写图片描述
下面这个例子是class对象绑定,为html标记绑定样式单的class属性对象
例:
这里写图片描述
》5.v-show:元素显示
这里写图片描述

备注:参考自小马课程以及菜鸟教程

猜你喜欢

转载自blog.csdn.net/Kratial/article/details/81784201
今日推荐