新建Vue对象
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="firstVue">
{{msg}}
</div>
</body>
<script type="text/javascript">
var myVue = new Vue({
el: "#firstVue",
data:{
msg:"hello world"
}
})
</script>
</html>
1).js变量 myVue 就是Vue创建的一个对象，可以理解成把<div id="firstVue></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象， 这个对象就是myVue
2).el是Vue的保留字，用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器，告诉Vue要实例化ID=“firstVue”的这个标签
数据绑定
VUE这个框架的数据流向是单向的，数据绑定后的数据流向是从vue实例——>DOM文档的
<body>
<div id="firstVue" v-bind:hidden="my_hidden">
{{my_data}}
</div>
</body>
<script type="text/javascript">
var myVue = new Vue({
el:"#firstVue",
data:{
my_data: "test",
my_hidden: "hidden"
}
})
</script>
1).data参数用来绑定VUE实例的数据变量，每个不同变量之间用逗号分隔，上面我们绑定了自定义变量my_data，并赋初值'test'
2).完成数据绑定工作，<div>标签里的{{myData}}数据会随着myVue实例里的myData数据的变动而变动，浏览器查看当前页面,会出现'test'字符串，说明数据绑定成功
3).如果想绑定某个HTML标签的属性值，就要用到v-bind:属性了，比如我想绑定一个标签是否可见的属性(hidden),v-bind:后面写想要绑定的属性，my_hidden也不需要用两个大括号括起来了
注：
v-bind由于经常会用到，所以也可以缩写成冒号:，比如上面的<div>标签就完全可以这样写
<div id="firstVue" :hidden="my_hidden">{{my_data}}</div>
事件绑定
v-bind:是用来绑定数据的，v-on:则是用来绑定事件
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="firstVue">
<button v-on:click="clickButton">Click Me</button>
<p>{{my_data}}</p>
<p v-if="seen">现在你看到我了</p>
</div>
</body>
<script type="text/javascript">
var myVue = new Vue({
el:'#firstVue',
data:{
my_data: "test",
my_hidden: "hidden",
seen:true,
},
methods:{
clickButton:function(){
this.my_data = "Wow! I'm changed!"
}
}
})
</script>
</html>
注：v-on:语法同样有一个缩写@，比如v-on:click="clickButton"就等价于@click="clickButton"
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
表单控件绑定
从DOM中实时获取用户输入的数据赋值给vue，使用v-model 通过两步实现了数据反向传递
第一步，绑定了DOM标签的input事件(比如叫tapInput())
第二步，当用户进行输入时候，触发tapInput()函数，tapInput()函数内部读取此DOM标签的Value值，赋值给vue实例
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="firstVue">
<input type="text" v-model="my_data" />
<button v-on:click="clickButton">Click Me</button>
<p>{{my_data}}</p>
</div>
</body>
<script type="text/javascript">
var myVue = new Vue({
el:'#firstVue',
data:{
my_data: "test",
my_hidden: "hidden"
},
methods:{
clickButton:function(){
this.my_data = "Wow! I'm changed!"
}
}
})
</script>
</html>
这里增加了一个<input>标签，并且用v-model语法绑定了之前定义的变量my_data，当我们在<input>输入框输入值的时候，v-model会实时将最新值(value)赋值给vue实例的my_data变量，而my_data变量又将实时展现在<p>标签中
数据流:
DOM1(input标签)——>VUE——>DOM2(p标签)
组件
<script>
Vue.component('button-demo',{
template:'<button>Hello button-demo!</button>'
});
//注册了'button-demo'以后，<button-demo></button-demo>就等价于<button>Hello here!</button>
//定义button-counter组件
Vue.component('button-counter',{
//定义数据
data:function(){
return {
count: 0
}
},
//定义方法
methods:{
clickAdd: function(){
this.count++
}
},
template :'<button @click="clickAdd">You clicked me {{count}} times</button>'
});
</script>
<body>
<button-demo></button-demo>
<button-counter></button-counter>
</body>
条件判断
//v-if 、v-else-if、v-else
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
v-show
v-show 指令来根据条件展示元素 <h1 v-show="ok">Hello!</h1>
循环使用 v-for 指令
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
posted on
