数据绑定最常见的形式是使用 {{ }} （双大括号）的文本插值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 学习笔记</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: ‘#app‘, data: { message: ‘Hello Vue.js!‘ } }) </script> </body> </html>
使用v-html指令用于输出html的代码如：message:‘<h1>我输出的就是本身不会带<h1></h1>‘
html属性中的值应使用v-bind 指令。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> </head> <style> .class1{ background: green; color: #eee; } </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="app"> <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{‘class1‘: use}"> v-bind:class 指令，通过事件判断usb的值 </div> </div> <script> new Vue({ el: ‘#app‘, data:{ use: false } }); </script> </body>
指令是带有V-前缀的特殊属性
指令用于表达式值改变时，将某些行为用到DOM上面。
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素
参数在指令后以冒号指明，比如，v-bind指令被用来响应的跟新HTML属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 学习笔记</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <pre><a v-bind:href="url">百度一下</a></pre> </div> <script> new Vue({ el: ‘#app‘, data: { url: ‘http://www.baidu.com‘ } }) </script> </body> </html>
另一个例子是v-on指令，用于监听DOM事件
<a v-on:click="doSomething">
在input输入框中我们可以用v-model指令来实现双向数据绑定。
v-model 指令用来在input，select，textarea，checkbox，radio等表单控制元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素值。
按钮事件我们可以用v-on监听事件，并对用户的输入进行响应。设置方法methods。
当我们给一个比如props中，或者data中被观察的对象添加一个新的属性的时候，不能直接添加，必须用Vue.set方法。
Vue.set方法来新增对象属性。如果要增加属性的对象是响应式的，那该方法可以确保属性被创建后也是响应式的，同时触发视图更新
export default{
props：{
food:{
type:Object
}
},
methods:{
addCart(){
if(!this.food.count){
Vue.set(this.food,‘count‘,1)
}else{
this.food.count++;
}
}
}
<pre >
<h2>
1 如何定义一个基本的Vue代码结构
2 插值表达式和 v-text
3 v-cloak
4 v-html
5 v-bind Vue提供的属性绑定机制 缩写是 :
6 v-on Vue 提供的事件绑定机制 缩写是 @
</h2>
</pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<!--将来new的Vue的实例会控制这个元素的所有内容-->
<div id="app">
使用v-cloak能够解决差值表达式闪烁的问题
<p v-cloak>{{ msg }}</p>
<h4 v-text=‘msg‘></h4>
v-text 不会出现闪烁问题 <br>
v-txt会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符不会把整个内容清空
<br><br><br>
<div>{{msg2}}</div>
<div v-text=‘msg2‘></div>
<div v-html=‘msg2‘>lalallalalala</div>
v-htm 和 v-text一样都会覆盖标签中的内容
<br><br><br>
v-bind 是vue中提供的绑定属性的指令 v-bind会把引号中的内容当成表达式
<br><br><br>
<input type="button" value="Button1" v-bind:title=‘mytitle + "123"‘> 这个标签用v-blind生成 <br>
<input type="button" value="Button2" :title=‘mytitle + "123"‘> 这个Button由:title（简写）绑定生成 <br>
冒号等于v-bind
<br><br><br>
Vue中提供了 v-on：事件绑定机制 <br><br>
<input type="button" value="Button3" :title=‘mytitle‘ v-on:click="alert(‘U clicked BTN‘)"> 词条命令运行会出错，因为在新建的Vue变量中没有alert方法 2
<br>
<input type="button" value="Button4" :title=‘mytitle‘ v-on:click=‘show‘> 此命令会触发Vue变量中的methods中的show方法 <br>
<input type="button" value="Button5" :title=‘mytitle‘ @click=‘show‘> v-on: 简写成 @
</div>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el: "#app", //当前我们new的这个Vue实例要控制页面上的哪个区域
data: {
//data属性中，参访的是el中要用到的数据
msg: "HelloWorld",
msg2:‘<h1>I am the H1 tag </h1>‘,
mytitle: ‘这是一个自己定义的title‘
},
methods: {
show: function(){
alert(‘hello‘);
}
},
});
</script>
</body>
</html>
原文：https://www.cnblogs.com/yangyunhao/p/12507914.html