前提需要：
HTML、CSS、JS、JQ
一、安装nodejs
node下载地址https://nodejs.org/en/
二、淘宝镜像站配置
命令行输入npm install -g cnpm --registry=https://registry.npm.taobao.org
三、使用淘宝镜像安装vue
1.安装vue
cnpm install vue
2.安装vue-cli
cnpm install --global vue-cli
基础练习：
// 使用步骤：
// 1.引包
// 2.启动vue，通过new Vue(options);
// 3.配置options选项对象
// 4.el:'目的地' template:模板 data:function(){return{要使用的key：数据}}
// 5.页面中存在该目的地，目的地字符串描述同jq方式一样
<div id="app">
<span>{{message}}</span>
</div>
<script>
//通过vue对象，去new Vue(options):
new Vue({
//el：发生行为的目的地。
//还可以书写： el:document.getElementById('app'),
//在vue内部运行机制中，需要根据你传递的字符串进行判断，比如，#xxx/.xxx，还是div 元素查找。
//使用el:document.getElementById('app')将会更为优化，将元素直接找到，避免了vue来去判断
//也可以用类名或标签名查找。
el:'#app',
//template:装载的模板
template:'<div><h1>Hello world,{{text}}</h1></div>',
//动态数据的声明
data:function(){//最常用
return{
text:'hello vue'
}
}
// data:{//也可以使用对象
// message:"hello world"
// }
})
</script>
##插值表达式：{{表达式}}
表达式可以是：
对象{{ {name:'jack'} }}
字符串{{'xxx'}}
判断后的布尔值{{true}}
三元表达式{{true?'yes':'no'}}
注：不要连续3个{{{name:'jack'}}}。如需使用，可以写作：{{ {name:'jack'} }}
可以用于页面中简单粗暴的调试
注：必须在data这个函数中返回的对象中声明。
##指令
在vue中提供了一些对于页面+数据的更为方便的操作(输出)，这些操作就叫做指令。
类似于html页面中的属性<div v-xxx></div>
比如在angular中以ng-xxx开头的就叫做指令。
在vue中以v-xxx开头的就叫做指令。
指令中封装了一些DOM行为，结合属性作为一个暗号,暗号有对应的值根据不同的值，框架会进行相关DOM操作的绑定。
vue中常用的v-指令
v-text元素的InnerText属性，必须是双标签
v-html元素的innerHTML
v-if判断是否插入这个元素
v-else-if
v-else
v-show隐藏元素，如果确定要隐藏，会给元素的style加上dispaly:none;
实例练习：
<script>
//启动vue
new Vue({
el:'#app',
//必须一个根节点。``引号中书写的内容支持换行
template:`
<div>
<span v-text="myText">这里的内容会被覆盖</span>
<span v-html="myHTML"></span>
<button v-if="isExit">测试v-if</button>
<!--三个元素必须是相邻的DOM元素。-->
<button v-if=" num == 1 ">测试v-if</button>
<button v-else-if=" num == 2 ">测试v-else-if</button>
<button v-else >测试v-else</button>
<button v-show="isShow">我是v-show</button>
</div>
`,
//动态数据的声明
data:function(){
return{
myText:'<h1>我是v-text的值</h1>',
myHTML:'<h1>我是v-html的值</h1>',
isExit:true,//当值为flase时原button处会留下一个注释的坑<!---->
num:2,
isShow:false
}
}
});
</script>
v-bind使用（绑定属性值）
给元素的属性赋值<div file="{{变量}}"></div>
可以给已经存在的属性赋值input value
也可以给自定义属性赋值mydata
语法:在元素上 v-bind:属性名="常量||变量名"
简写形式 :属性名="变量名"
例:
<div v-bind:原属性名="变量"> </div>
<div :属性名="变量"> </div>
v-on的使用（绑定事件）
处理自定义原生事件的给按钮添加click并让使用变量的样式改变
在元素上 v-on:原生事件名="给变量进行操作||函数名"
简写形式: @原生事件名="给变量进行操作"
练习:
<div id="app">
</div>
<script>
//启动vue
new Vue({
el:'#app',
//若要书写常量，结构为" 'xxx' "
//value值是根据vue内部的变量而书写的。点击按钮时改变了vue内部的变量。
//vue察觉到页面中使用的变量更改了，所以重新渲染了视图的更改部分。
template:`
<div>
<input type="text" v-bind:value="myValue" :file=" 'xxx' " />
<button v-on:click="myValue='icebns'">点我改变myValue</button>
<button @click="myValue='hyzc'">简写改变myValue</button>
</div>
`,
data:function(){
return{
myValue:"咩?",
}
}
});
</script>
v-model
双向数据流(绑定)
页面改变影响内存(js)内存(js)改变影响页面
练习：
<!--
v-bind可以给任何属性赋值，他是从vue到页面的单向数据流
v-model只能给具备value属性的元素进行双向数据绑定。（必须使用的是有value属性的元素）
-->
<div id="app">
</div>
<script>
//启动vue
new Vue({
el:'#app',
//当元素的value值被改变以后 就会给vue中的属性赋值，进而重新渲染。
template:`
<div>
<input type="text" v-model:value="myValue" />
当用户输入XXX的时候，显示下面的button
<button v-show="myValue== 'xxx'">用户输入的是xxx</button>
</div>
`,
data:function(){
return{
myValue:"咩",
}
}
});
</script>
## v-bind和v-model的区别?
input v-model=" name'
双向数据绑定页面对于input的value改变,能影响内存中name变星
内存js改变name的值，会影响页面重新渲染最新值
input :value="name"
单向数据绑定内存改变影响页面改变
v-model:其的改变影响其他 v-bind: 其的改变不影响其他
v-bind就是对属性的简单赋值当内存中值改变，还是会触发重新渲染
v-for的使用
基本语法v-for="item in arr"
对象的操作v-for="item in obj" 如果是数组没有id
<div id="app">
</div>
<script>
// 补充:v-for的使用中，除了item属性，也还有一些辅助属性
//stus：数组： （item，index）in stus
//奇偶数不同样式
//:class="index%2==0?'pink':'blue'"
//stus:对象 （value,key,index) in stus
new Vue({
el:'#app',
template:`
<div>
<ul>
<!--item只是一个临时变量，叫什么都可以-->
<li v-for="item in stus" :class="item.myClass">{{item.name}}</li>
</ul>
<br>
<ul>
<li v-for="(val,key,index) in stus2" :class="index%2==0?'b':'a'">
val:{{val}}
key:{{key}}
index:{{index}}
</li>
</ul>
</div>
`,
data:function(){
return{
stus:[{name:'icebns',myClass:'a'},{name:'hy',myClass:'b'},{name:'xw',myClass:'a'}],
stus2:{'a':'icebns','b':'hy','c':'xw'}
}
}
});
</script>
关于对象内的this
vue已经把以前this是window或者事件对象的问题搞定了
methods和data本身是在同一个对象中的，所以在该对象中可以通过this.随意取
this.xxx取data中的值, this.xxxMethod调methods中的函数
四个li同时显示/消失的练习：
<div id="app">
</div>
<script>
new Vue({
el:'#app',
template:`
<div>
<button @click="changeIsShow">点我点我</button>
<h1 v-show="isShow">1</h1>
<h1 v-show="isShow">2</h1>
<h1 v-show="isShow">3</h1>
<h1 v-if="isShow">4</h1>
<!--不能写changeIsShow()-->
</div>
`,
data:function(){
return{
isShow:true
}
},
//在根属性中声明methods属性
methods:{
//key是函数名，value是函数体
changeIsShow:function(e){
//isShow不是全局变量，不能直接引用。所以需要用this引一下
//this就是data函数return出去的对象。
//vue帮我们处理的this指向，不是事件对象。
//<button>点我点我</button>
console.log(e.target);
//Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
console.log(this);
this.isShow = !this.isShow;
}
}
});
</script>