vue指令
v-model 双向绑定
v-mode是配合input框使用的，data数据改变，使用了v-mode的input框内容也会改变。
三种输出方式
vue共有三种输出方式：
1:vue模板输出{{}} 只能输出纯文本
2：v-text 跟模板输出几乎一样 也是只能输出纯文本不能解析html标签 但是他会覆盖掉P标签原有的内容
3：v-html 可以解析html标签在输出
data数据作为测试
data: {
text: '<h1>你过来啊</h1>'
}
模板语法
直接在p标签中使用{{}}模板语法：
<p>564541 {{text}} 54154154</p>
结果：
v-text
b标签使用v-text 内容以及有6546496494 然后在data写入h1标签带你过来啊，我们看到原来内容已经被覆盖但是h1并没有被解析出来。
<b v-text="text">6546496494</b>
结果：
v-html
在h3标签中使用v-html，可以解析h1标签，使内容变成h1标签内容。
<h3 v-html="text">我是html原本的内容</h3>
结果：
v-bind
v-bind 主要用于属性绑定显示到页面比如文字、数字、照片等，Vue官方提供了一个简写方式 :bind，例如：
<a v-bind:href="url"></a>
缩写
<a :href="url"></a>
我们看测试例子
大前提的data数据：
data: {
url: "http://www.xxdalaba.cn", //http路径
name: "lucky", //文本
imgs: 'img/多啦A梦.png' //图片路径
}
绑定网址
给a标签绑定网址路径，可以看到点击正常进入网址。
<a :href="url">新乡市大喇叭官网</a>
输出文本
给input的value绑定data下的name，也是正常显示，这就可以用来提交input之类的操作。
<input type="text" :value="name" />
绑定图片
给img标签绑定图片路径。
<img :src="imgs" >
v-on
作用
1:指令用于监听DOM事件 事件绑定：v-on： 简写@
2：用法：v-on：click="方法名称"；
3：在js中事件在vue中任然可以使用
4：监听事件：监听DOM事件来触发一些JS代码，简单的事件可以用
5：方法事件处理器：许多事件处理的逻辑都很复杂，接受一个定义的方法来调用
6：传参
写法
使用v-on：后跟js事件即可
<button v-on：click="click"></button>
缩写直接使用@跟事件
<button @click="click"></button>
加减事件实例
html代码，绑定add加法函数和subtract减法函数，一次加减1和10。
<button @click="add(1)" value="加">加</button>
<button @click="subtract(1)" value="减">减</button>
<button @click="add(10)" value="加">加10</button>
<button @click="subtract(10)" value="减">减10</button>
数字1，函数中获取到点一次加减inc次，又html传入的参数为准。
data: {
namb: 1,
},
methods: {
//增加
add: function(inc) {
this.namb += inc;
},
//减少
subtract: function(dec) {
this.namb -= dec
}
}
效果：
加一
减一
加十
减十
v-for
写法
v-for用来遍历或枚举数组和数据，v-for 指令使用 item in items 形式的语法，items 是data数据数组而 item 是在for循环里使用的别名。当然你也可以用你喜欢的别名。
渲染数组
直接使用模板语法{{}}写入name别名即可。
<div id="app">
<ul>
<li v-for="name in names">
{{ name }}
</li>
</ul>
</div>
data数据：
data: {
names: [names: ['杜', '郭','张']
}
渲染对象
html代码，可以指定对象中的某一个值进行渲染。
<ul>
<li v-for="obj in objs">
我姓{{ obj.name }} ，年龄 {{obj.age}} 。
</li>
</ul>
data数据
data: {
objs: [{
name: "杜",
age: 21
},
{
name: "郭",
age: 18
},
{
name: "张",
age: 22
},
]
}
效果
