1.挂载点：（类似于选择器，用户绑定数据需要在哪个地方显示）
<body>
<div id='app'> </div>
</body>
<script>
var my = new Vue({
el: '#app',
// 这里进行挂载，使用类选择器的格式
})
</script>
2.模板，使用一个字符串当作HTML在页面上进行放置。（会替代原本元素中的内容）
<body>
<div id='app'> </div>
</body>
<script>
var my = new Vue({
el: '#app',
// 这里进行挂载，使用类选择器的格式
template: '<p>Hello world!</p>',
// 这里是模板，会替换原本节点中的内容
})
</script>
3.数据实例，需要在页面显示的内容，通过一个数据的实例进行显示。（使用{{}}插值表达式来引用数据，可以直接放置在节点中，也可以放置在模板中）
<body>
<div id='app'> </div>
</body>
<script>
var my = new Vue({
el: '#app',
// 这里进行挂载，使用类选择器的格式
template: '<p>Hello world!</p>',
// 这里是模板，会替换原本节点中的内容
data: {
msg: 'hello world.'
// 这里是数据的实例
}
})
</script>
4.指令：v-text和v-html（区别在于一个会将内容执行直接显示为文本，另一个会显示为HTML）
<div id='app'>
<div v-text="content"></div>
<div v-html="content"></div>
</div>
</body>
<script>
var my = new Vue({
el: '#app',
// 这里进行挂载，使用类选择器的格式
data: {
content: '<p>Hello world! Guoqi</p>'
// 这里是数据的实例
}
})
</script>
5.普通事件绑定：（通过在HTML标签中绑定事件，从而进行简单交互）
<div id='app'>
<div v-on:click="()=>{alert(123)}">
{{content}}
</div>
</div>
6.模板绑定事件：（通过在Vue实列中声明方法，然后再标签中进行方法的绑定，绑定时候使用的v-on可以简写为@符号）
<body>
<div id='app'>
<div v-on:click="handleClick">
{{content}}
</div>
<div @click="handleClick">
{{content}}
</div>
</div>
</body>
<script>
var my = new Vue({
el: '#app',
// 这里进行挂载，使用类选择器的格式
data: {
content: 'Hello world! Hello Guoqi'
// 这里是数据的实例
},
methods: {
// 这里是方法的声明，在上面的标签中进行对方法的绑定
handleClick: function(){
this.content = 'hahahaha'
// 使用this.content会直接指向data中的content
}
}
})
</script>
7.属性绑定：（在HTML标签中绑定一些数性值或者其它内容，使用v-bind:可以使用:冒号直接表示。注意使用绑定等号之后的文本就不再是文本了，而是会通过JS转化为一个变量或者其它）
<body>
<div id='app'>
<div v-bind:title="titlemsg">
hello world
</div>
<div :title="titlemsg">
hello world
</div>
</div>
</body>
<script>
var my = new Vue({
el: '#app',
// 这里进行挂载，使用类选择器的格式
data: {
titlemsg: 'this is Hello '
// 这里是数据的实例
},
})
</script>
8.数据双向数据绑定：(表示可以在实例中的数据变化和视图中的数据变化会同步跟新。使用v-model放置在输入框中进行实现)
<body>
<div id='app'>
<input type="text" v-model="msg">
<div>{{msg}}</div>
</div>
</body>
<script>
var my = new Vue({
el: '#app',
data: {
msg: 'this is Hello '
},
})
</script>
9.计算属性：（表示一个数据可以由实例中的另外数值计算而来，并且如果数据未发生改变，会优先使用缓存数据，性能较好）
<body>
<div id='app'>
姓：<input type="text" v-model="firstName">
名：<input type="text" v-model="lastName">
<div>{{fullName}}</div>
</div>
</body>
<script>
var my = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
},
computed: {
fullName: function (){
return this.firstName + '' + this.lastName
}
}
})
</script>
10.侦听器：（在实例中使用watch进行申明，然后对指定的数据变化进行侦听，大数据变化时候，会执行相应的方法）
<body>
<div id='app'>
姓：<input type="text" v-model="firstName">
名：<input type="text" v-model="lastName">
<div>{{count}}</div>
</div>
</body>
<script>
var my = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
count: 0
// 这个是侦听的数据
},
computed: {
fullName: function (){
return this.firstName + '' + this.lastName
}
},
watch: {
// 监测fullName是否发生变化，如发生变化则调用方法
fullName: function(){
this.count += 1
}
},
})
</script>
11.v-if和v-show：（控制页面中某个标签是否显示，两者差别为使用if则将标签直接在文档树中进行删除，使用show的时候则只是将其隐藏了）
扫描二维码关注公众号，回复：
9536691 查看本文章
<body>
<div id='app'>
<div v-if="show">hello world</div>
<div v-show="show">hello world</div>
<button @click="handClick">toggle</button>
</div>
</body>
<script>
var my = new Vue({
el: '#app',
data: {
show: true,
},
methods: {
handClick: function(){
this.show = !this.show
}
}
})
</script>
12.模板指令v-for：（使用v-for表示可以将一个数组内容全部遍历展示出来，使用一个key值可以提升渲染的效率，不过要求key值不重复）
<body>
<div id='app'>
<ul>
<li v-for="(item, index) of list" :key="index">{{item}}</li>
</ul>
</div>
</body>
<script>
var my = new Vue({
el: '#app',
data: {
show: true,
list: [1, 2, 3]
},
})
</script>
13.简单的todolist的实现：（点击提交将输入狂中的内容进行提交然后清空输入框）
<body>
<div id='app'>
<div>
<input v-model="inputValue" type="text">
<button @click="handleSubmit">提交</button>
<ul>
<li v-for="(item, index) of list" :key="index">{{item}}
</li>
</ul>
</div>
</div>
</body>
<script>
var my = new Vue({
el: '#app',
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
14.全局组件和局部组件
<body>
<div id='app'>
<div>
<ul>
<todo-item></todo-item>
</ul>
</div>
</div>
</body>
<script>
// 全局组件
// Vue.component('todo-item', {
// template: '<li>item</li>'
// })
// 布局组件
var todoItem = {
template: '<li>item</li>'
}
var my = new Vue({
el: '#app',
components: {
// 局部组件进行使用
'todo-item': todoItem
},
data: {
inputValue: '',
list: []
},
})
</script>
15.vue自定义组件的属性值传递：（父组件向子组件传递数据，定义的标签怎么将标签的数性值继续传递到实例中）
<body>
<div id='app'>
<div>
<ul>
<todo-item v-for="(item, index) of list"
:key="index"
:content="item"
:valueabc="index">
</todo-item>
</ul>
</div>
</div>
</body>
<script>
//全局组件
Vue.component('todo-item',
{
// 定义接受组件或标签中的哪些数性值
props: ['content'],
// 标签或组件的展示样式
template: '<li>{{content}}</li>'
})
var my = new Vue({
el: '#app',
data: {
list: [2, 3, 5]
},
})
</script>
16.子组件向父组件传递数据：（子组件可以拿到自己的数据，需要向上进行传递的时候，通过向外发布触发一个方法并进行参数传递从而将数据传递出去，注意这个方法需要是父组件已经申明的一个方法）
<body>
<div id='app'>
<div>
<input type="text" v-model="inputValue">
<button @click="addItem">提交</button>
<ul>
<!-- 因为这个todo-item是属于父组件中的template中的内容,所有这里绑定的方法也是父组件实例中的方法,即@delete绑定的父组件中的方法-->
<todo-item v-for="(item, index) of list"
:key="index"
:content="item"
:indexvalue="index"
@delete="fatherdelectItem">
</todo-item>
</ul>
</div>
</div>
</body>
<script>
//全局组件
Vue.component('todo-item',
{
// 定义接受组件或标签中的哪些数性值
props: ['content', 'indexvalue'],
// 标签或组件的展示样式,在这里绑定的方法是属于子组件的方法,因为这里的template才是子组件中的内容
template: '<li @click="sondelectItem">{{content}} {{indexvalue}}</li>',
methods: {
sondelectItem: function(){
// 向往发布通知触发事件,通知一个delete事件并且传递一个参数为this.index
this.$emit('delete', this.indexvalue)
}
}
})
var my = new Vue({
el: '#app',
data: {
inputValue: "",
list: [],
},
methods: {
addItem: function(){
this.list.push(this.inputValue)
this.inputValue = ''
},
fatherdelectItem: function(index){
this.list.splice(index, 1)
}
}
})
</script>
