首先到官网https://cn.vuejs.org/下载，引入的vue.js最好放在head中 可以防止页面抖屏，怎么使用vue呢，那么就要创建一个实例 new vue（｛必须要有el，el表示我要vue去接管哪个元素，el就是element｝）给div加一个id=“test”,那么el："#test"表示el去接管ID为test这个元素中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="test"><h1>输出{{msg}}</h1></div>
<script>
new Vue({
el: "#test",
data: {
msg: "hello word"
}
})
</script>
</body>
</html>
先讲一下挂载点 、模板、 实例之间的关系<div id="test"></div>这个通过el进行绑定就是vue的挂载点，有什么用呢，如果在下面<div id="test"></div>再输入<div>{{msg}}</div>，那么页面中只会原样输出显示{{msg}}，vue只会处理挂载点下面的内容，挂载点就是实例vue后面的el属性后面id所对应的dom节点，如果在挂载点里面添加一个h1标签，<div id="test"><h1>输出{{msg}}</h1></div>，其中div里面中的所有标签都叫做模板，还可以这样编写，我把模板放在vue的实例中去编写，写上template:'<h1>输出{{msg}}</h1>'这样就不用在挂载点下面去写这个模板了，模板就是挂载点内部的内容，模板可以有两种写法，一种写在挂载点的内部，一种可以写在vue实例中的template属性中，实例中你只需要指定一个挂载点，把模板写上，vue就会结合你的数据和模板自动将你的内容放在挂载点之中
vue实例中的数据、事件和方法，在实例中的数据项中我们可以配置任意的数据名字，如number，那么我们就可以通过插值表达式{{number}}的形式来表示，也可以通过v-text来表示，这个是vue中的一个指令，后面跟的是一个变量，<div id="test"><h1 v-text="number"></h1></div>,换成v-html也是同样的效果，实例中data的数据
data: {
msg: "hello word"
number:123
}
那么v-text和v-html中有什么不同呢，如，<div id="test"><div>{{content}}</div></div>
data: {
content:"<h1>hello</h1>"
}
v-text显示的内容是转义的内容：<h1>hello</h1>，v-html不会显示转义的内容：hello，说明v-text会将显示的内容进行一次转义，而v-html不会显示转义的内容
新的模板指令，v-on:表示的是绑定事件，这个也可以简写成@，v-on:click=“handleClick”表示点击事件，可简写成@click=“handleClick”，那么怎么实现这个绑定事件呢，就要写在vue实例中methods对象里面
methods:{
handleClick:function(){
alert(123)
}
}
如果我们想点击了这个事件我们想改变这个内容，那么可以通过this.来改变
new Vue({
el: "#test",
data: {
content: "hello"
},
methods: {
handleClick: function () {
this.content = "world"
}
}
})
vue中的属性绑定和双向数据绑定，如果<div id="test"><div title="title"></div></div>
data:{
title:"this is title"
这样看似可以，但是还是会显示title，不会显示this is title，这样是因为没有将数据绑定，可以通过v-bind:title=“title”,这样就会显示this is title，这样绑定后title就是js表达式了，既然是表达式了，那么就可以在后面添加其他，如<div id="test"><div v-bind:title="'test'+title">hello</div></div>这样就会显示testthis is title，使用了模板指令，那么他后面就是js表达式了，在vue指令中v-bind:可以缩写成：这就是属性绑定了，接下来什么是双向绑定呢？比如：<input :value="content"/><div>{{content}}</div>
data:{
content:"this is content"
}
这样input框只会显示this is content，并不能输入什么就改变什么，这样vue提供了一个指令v-model可以来实现，这样<input v-model="content"/><div>{{content}}</div>如果input框中的内容改变的话，那么下面的div中的内容也会改变
vue中的计算属性和侦听器的使用，<input v-model="firstname"/><input v-model="lastname"/><div>{{firstname}}{{lastname}}</div>
data:{
firstname:'',
lastname:''
}
这样虽然可以拼接写成数据，但是这样会觉得代码冗余，这样我们怎么可以通过计算得到fullname呢，我们进行改写下<input v-model="firstname"/><input v-model="lastname"/><div>{{fullname}}</div>那么就需要在computed属性中这样写，
data:{
firstname:'',
lastname:''
}，
computed:{
fullname:function(){
return this.firstname+' '+this.lastname
}
}
这样写有一个好处，就是如果两个没改变，就会显示上次的缓存值，只有当其中一个或是都改变了才会重新计算，侦听器的使用是通过watch的定义来使用的，侦听器的作用是侦听某一个数据的变化，一旦这个数据发生了变化，那么我们就可以在watch中去侦听我们的逻辑，如侦听fullname的变化
data:{
firstname:'',
lastname:''
}，
computed:{
fullname:function(){
return this.firstname+' '+this.lastname
}
}，
watch:{
fullname:function()
{
this.count ++
}
}
常见的三个指令：v-if v-show v-for<div>hello</div><button>test<button>怎么让点击这个按钮后显示或隐藏hello呢，通过v-if来控制，<div v-if="show">hello</div><button @click="handleClick">test<button>
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show;
}
}
如果把v-if换成v-show发现页面并没有什么区别，仔细看在控制台会发现不同，v-if表示当为false的时候，你会发现这个标签将会从dom节点中移除，v-show表示当为false的时候，你会发现虽然被隐藏，但不会从dom节点中移除，只是将div的属性改为隐藏(display=none）,如果频繁点击的话，使用v-if好还是v-show好呢，当然是v-show，不会这样可以增加删除，提高性能，如果你只做一次的显示隐藏可以选择v-if是个更好的选择，v-for的使用
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
item of list表示循环list中的数据项，每一次的循环中的内容会放到item这个变量中去
data: {
list:[1,2,3]
}
使用v-for时最好加一个 ：key=“”会提升每一项的性能
扫一扫
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
