一：vue的使用
创建一个vue对象，
var vm = new Vue({
el:'#id',
data:{
a:10
}
});
场景：-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.输出到html中：<div>{
{a}}</div>2.现在我不想输出到html内容中，我想输出到标签的属性中去，比如div的title中：<div v-bind:title="a">你好</div> 或者 <div :title="a">你好</div>
3.在vue中如何使用事件：<div v-on:click="事件函数名">{
{a}}</div> 或者 <div @click="事件函数名">{ {a}}</div>4.我想让用户输入一些数据：
<div id="app" >
<input type="text" v-model:value="a">{ {a}} </div>5.循环data里的数组到元素中：
data:{
studentInfo:[ {'name':'hubo','age':12}, {'name':'xiaohong','age':22}, {'name':'bangzi','age':44} ] }
<ul>
<li v-for="x in studentInfo">{ {x.name}}+' '+{ {x.age}}</li> </ul>
6.{
{a}} vue的表达式有点局限，因为我输出的话有可能是html文本，有可能是a标签等等，但是{ {}}花括号都给我转义了，直接输出了，可是我想生成一个a标签等等。这里就使用了v-htmldata:{
a:'<a href="http://www.baidu.com">baidu</a>' }
<div v-html="a"></div>
7.实现两个输入框，用户输入两个数字，立马求得和。
<input type="text" v-model:value="setA">
<input type="text" v-model:value="setB"> { {a+b}}
data:{
a:0,b:0 }, computed:{ setA:{ get:function(){ return this.a; }, set:function(newValue){ this.a = parseInt(newValue); } }, setB:{ get:function(){ return this.b; }, set:function(newValue){ this.b = parseInt(newValue); } } }
8.监听：
<input type="text" v-model="a">{
{a}}watch:{
a:function(newval,oldval){ alert('cong' + oldval + '->' +newval); } }
9.事件之修饰符
10：v-if使用
指令：-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
{
{}} -----称为vue表达式v-bind：绑定属性 简写 ‘冒号：’
v-on：绑定事件，配合methods 简写 ‘@’ ----------------------事件里边还有关键词是修饰符：
v-model:双向绑定，就是数据层变，那么我视图层也会变。视图层变，我的数据层也会变。
v-for：循环数据
v-html：原样输出html
v-if：表示判断。如果是true就显示，如果是false就是不显示。 不显示的话，就是让元素消失，删除，而不是隐藏。
v-show:和上边的v-if相似，但是v-show是把元素隐藏。
v-cloak:可以这遮盖、隐藏 因为网速慢的原因导致的元素数据没出来的情况。
v-once：提高性能
v-pre：提高性能
花括号里面是操作：-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
el：是指定vue的作用范围
data：是数据
methods:是函数，绑定事件的函数在这里命名
computed：计算数据：受控制的访问--get set ---适合同步操作
watch：监听，当数据变化的时候，我们能知道，有通知 ----适合异步操作
vue-router：-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
路由就是一个锚点，根据锚点来显示不同的组件。
路由对象：
1.path 匹配的路由路径
2.component 路由主体：包括template、
3.children 子路由
1.先声明一个路由：
var r1 = new VueRouter({
routes:[
{path:'/user',component:{
template:'<div>用户列表<.div>'
}},
{path:'/article',component:{
template:'<div>文章列表</div>'
}}
]
});
2.调用这个路由,把r1放入我们的对象里边。
var vm = new Vue({
el:'#app',
router:r1
});
3.路由放入了vue对象中还不够，你必须告诉vue，我这个组件要在哪里渲染，使用router-view标签这个渲染容器来告诉vue在哪里渲染、
<router-view></router-view>
使用<router-link></router-link>标签来实现用户点击，其实也就是一个a标签。
<a href="#/user">用户</a>
<router-link to="/user">用户</router-link> 作用其实都是一样的， 但是就是#不用写。还有一个好处：编译完之后多了一个class，就是默认点击的class---active
4.路由都有参数。
window.onload = function(){
var r1 = new VueRouter({ routes:[ {path:'/user/:id/',component:{ template:'<div>{ {$route.params.id}}</div>' }} ]});var vm = new Vue({
el:'#app', router:r1 });};
<div id="app" >
<router-link to="/user/123">用户1</router-link> <router-link to="/user/456">用户2</router-link> <router-link to="/user/789">用户3</router-link> <router-link to="/user/12334">用户4</router-link> <router-view></router-view></div>
5.js操作路由：
在vm对象中：this.$router.go(-1);
this.$router.push()
6.路由的监听：
方法1是使用vm对象的watch，不推荐，因为路由对象已经有方法可以使用。
<div id="app" >
<router-link to="/user/123">用户1</router-link> <router-link to="/user/456">用户2</router-link> <router-link to="/user/789">用户3</router-link> <router-link to="/user/12334">用户4</router-link> <router-view></router-view> </div>
window.onload = function(){
var r1 = new VueRouter({ routes:[ {path:'/user/:id/',component:{ template:'<div>{ {$route.params.id}}</div>' }} ] });var vm = new Vue({
el:'#app', router:r1, watch:{ '$route':function(newValue,oldValue){ alert(`id从${oldValue.params.id}变成了${newValue.params.id}`); } } }); };
方法2：使用路由对象的beforeRouteUpdate:在路由对象中的component，可以有多个内容。不仅仅局限于templa
window.onload = function(){
var v1 = new VueRouter({
route:[
{path:'/user',component:{
template:'<div>{$route.params.id}</div>',
beforeRouteUpdate(to,from,next){
console.log(to);
console.log(from);
next();------------------------------------------------------------------是用来路由切换的。
}
}}
]
});
};
7.子路由，嵌套路由。
<div id="app" >
<router-link to="/user/123/info">用户1用户信息</router-link> <router-link to="/user/123/pass">用户1修改密码</router-link><br> <router-link to="/user/789/info">用户2用户信息</router-link> <router-link to="/user/789/pass">用户2修改密码</router-link> <router-view></router-view> </div>window.onload = function(){
var r1 = new VueRouter({ routes:[ {path:'/user/:id/', component:{ template:'<div>用户：{ {$route.params.id}}<router-view></router-view></div>', }, children:[ { path:'info', component:{ template:'<div>个人信息</div>' } }, { path:'pass', component:{ template:'<div>修改密码</div>' } } ]}
] });var vm = new Vue({
el:'#app', router:r1 }); };
8.命名路由：
router-link：
1.基本：to="/路径"
2.扩展： :to="{name，path，params，query}"
9.命名视图：多视图：
<div id="app" >
<router-view></router-view> <router-view name="a"></router-view> <router-view name="b"></router-view> </div>
window.onload = function(){
var r1 = new VueRouter({ routes:[ { path:'/user', components:{ default:{ template:'<div>欢迎你</div>' }, a:{ template:'<div>国家</div>' }, b:{ template:'<div>城市</div>' } } } ] });var vm = new Vue({
el:'#app', router:r1 }); };
组件：-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
注册一个全局组件：
Vue.component('cmp-hubo',{template:'<div>aaa</div>'
})
使用方法：
<cmp-hubo></cmp-hubo>
注册一个局部组件：
window.onload() = function(){
var vm = new Vue({
el:'#app',
components:{
'hubo':{
template:'<div>asd123</div>'
}
}
});
}
vue-cli：-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
vue-cli怎么安装：
命令行下：cnpm i -g vue-cli
列出vue的模板： vue list 常用的webpack版本
创建一个工程：vue init <template> <path>
关键词：-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
虚拟dom
vue-router路由
component组件：强调重用，涉及了两个组件之间的通信、状态管理（vuex）
vue-cli：项目的管理、打包、测试等
template:模型
vuex