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的时候则只是将其隐藏了)
<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>