一个简单的vue实例
1.进入vue官网：
https://cn.vuejs.org/v2/guide/installation.html
两种方法;1)点击开发版本，进入vue.js,复制到自己的文件夹，主页里引入2）直接引入cdn
注：<script src="js/vue.js"></script>放在head标签之间，避免抖屏。
<head>
<meta charset="utf-8"
<title>Vue入门</title>
<script src="./vue.js"></script>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world"
}
})
</body>
el: "id的值",//引用id的值，Vue通过el与属性值root进行绑定
msg:"输出值"可直接填写任意输出值
注意vue实例里不同属性用逗号隔开
2.挂载点，模板与实例之间的关系
挂载点：指的是Vue实例下中el属性对应的""中的id所对应的dom节点(div)，即代码中el对应id的HTML标签
模板：指的是在挂载点内部的这些内容都称作模板内容，可以写在挂载点内部也可以写在实例里的template中
实例：即newVue中，Vue会结合模版和数据生成最终要展示的内容，然后把放在挂载点之中
3.vue实例中的数据，事件和方法
-
{{number}}：插值表达式，也就是把number的值插入到h1之中；
-
v-text="number"：h1的内容由number这个变量决定，v-text是Vue中的一个指令，这个指令里面的东西跟着的是一个变量，它告诉h1显示的内容就是"number"这个变量；
-
v-html="c ontent"：v-html与v-text的区别是，v-html不会转义，而v-text会转译；
-
v-on:click="handleClick"：通过v-on给元素绑定一个Click事件，事件触发方法。
v-on:click简写是@click
View Code<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./vue.js"></script> <title>Vue入门</title> </head> <body> <div id="root"> <div @click="handleClick">{{content}}</div> </div> <script> new Vue({ el: "#root", data: { content: "hello" }, methods: { handleClick: function() { this.content = "world" } } }) </script> </body> </html>
<body>
<div id="root">
<div @click="handleClick">{{content}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "hello"
},
methods: {
handleClick: function() {
this.content = "world"
}
}
})
</script>
</body>
//点击hello变为world,
//{{content}}可以写为<div v-text="content"></div>
//new Vue中的this是指这个 Vue实例 ,指它自己
4.vue中的属性绑定和双向数据绑定
1)属性绑定
v-bind:title="title" ，双引号里面的是JS表达式,其中“”中的title指的是data里的title
2)双向绑定
单项绑定：数据决定页面的显示，但是页面无法决定数据的内容
v-model：双向数据绑定，随着数据的修改与之对应的也会修改。
//v-bind:title="title"可以缩写成，
：title="title"
//可以加入js表达式
v-bind:title="'gege lee'+title"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>属性绑定和双向数据绑定</title> <script src="./vue.js"> </script> </head> <body> <div id="root"> <div :title="'dell lee' +title">hello world</div> <input v-model="content"/> <div>{{content}}</div> </div> <script> new Vue({ el:"#root", data:{ title:"this is hello world", content:"this is content" } }) </script> </body> </html>
5.vue的计算属性和侦听器
1)计算属性(computed)
一个属性通过其他属性计算而来
计算属性 computed:{ fullName: function() { return this.firstName + " " + this.lastName; } } computed 有缓存的功能
2）侦听器（watch）
指的是监听某一个数据或计算属性发生了变化，然后就在监听器里面做业务逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>计算属性和侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓:<input v-model="firstName"/>
名:<input v-model="lastName"/>
<div>{{fullName}}
</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{
fullName:function(){
return this.firstName+' '+this.lastName
}
}
,watch:{
fullName:function(){
this.count++
}
}
})
</script>
</body>
</html>
6.v-if ,v-show,v-for指令
v-if: 控制dom的存在与否，对应data中的值show是true时显示，为false，则把这个标签就移除。
v-show :控制dom的显示与否，v-show 只是切换display的一个属性，当对应指令值show为false时，div标签会隐藏，就会把div标签的display属性变成none,如果需要频繁的的切换标签展示状态，则用v-show
v-for :循环展示dom结构
用v-for去渲染li标签时，需要绑定一个key属性，这样会加快渲染的速度，可以直接用item来作为他的值，key值不能相同，所以如果内容是相同的就不能直接用内容作为key值了，可以直接用index作为key值。但是如果需要对列表进行排序的变更的话，也不能用index。v-for="(item,index) of list":key="index"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>v-if ,v-show,v-for指令</title>
<script src="./vue.js">
</script>
</head>
<body>
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(item,index) of list":key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
show:true,
list:[1,2,3]
},
methods:{
handleClick:function(){
this.show=!this.show;
}
}
})
</script>
</body>
</html>