vue2.0基本用法
(npm run dev)
和angular有许多类似的地方，由于使用了大量ES6语法，所以不支持IE8以下版本
一、基本语法
vue实例最外层放一个
1.{{}}:同angular一样，使用{{}}包裹变量
{{ name }}
同样，和angular一样，可以在{{}}里面写表达式，{{1+1}}{{Math.random()>0.5}}{{‘abc’.toUpperCase()}}{{ 10>30?30:60 }},注意，这里不能写if()else
2.v-model
和angular的ng-model类似，实现数据的双向绑定
{{ name }}
使用name变量之前，要先定义
创建模板对应的vue实例
var vm=new Vue({
el:'#app',//el:elements Vue对应的根标签
data:{//对应的数据
name:'小明'
}
})
在data中可以定义变量数组对象字符串
3遍历v-for(in/of)
不仅可以遍历数组元素，还可以遍历数组下标
- {{i+person.name}}
var vm=new Vue({
el:'#app',
data:{
people:[
{name:'xiaoming'},
{name:'xiaohong'},
]
}
})
使用v-for遍历对象的value；
{{value}}
var vm=new Vue({
el:'#app',
data:{
mine:{
name:'xiaoming',
age:18
}
}
})
v-for可以遍历对象的value和key值，注意value在前，key在后
{{value}}{{key}}
4.点击事件v-on:click="change"
无论使用什么事件，都是用v-on指令，后面跟事件名称即可,可以不加()在不传参的情况下
点击显示
定义函数时，要使用methods
var vm=new Vue({
methods:{
show:function(){
console.log(event);
}
//可以简写成一下的形式ES6新语法
show(){
console.log(event)
}
}
})
如果想要得到里面的变量，可以直接写vm.变量名，如vm.show或vm.name;
5.v-if决定是否渲染,可以和v-else连用
hhhh
lksdjfkaldj
6.v-show决定是否显示
h2
7.v-on添加事件
可以简写成@
还可以写其他的事件
等等
还可以添加修饰符，针对某一个按键起作用
只用在点击enter键时，才会执行函数，注意，这样的针对某一个按键起作用，就必须绑定在键盘事件上
上下键的上
同样也可以取消默认事件
baidu
还可以取消冒泡
baidu
说到这里，可以复习一下原生的取消默认事件的方法，和取消冒泡的方法
event.stopPropagation取消冒泡事件
event.preventDefault;取消默认事件
8.v-bind绑定属性
同样可以简写成
不光可以写class，其他的属性都可以这样写，
在使用v-bind简写形式时，
必须加冒号，不然会把它里面的值当成一个字符串显示，而不是我们要的变量得形式
9.计算属性computed;
{{ aDouble }}
{{ aPlus }}
var vm=new Vue({
el:'#app',
data:{
a:10,
},
computed:{//计算属性
aDouble:function(){
return this.a*2;//这里的this.a==vm.a;
},
aPlus:{
get:function(){
return this.a*2;
},
set:function(newValue){
console.log(newValue);
if(newValue>100){
this.a=100;
}else if(newValue<=0){
this.a=0;
}else{
this.a=newValue;
}
}
}
}
})
计算属性可以内部编写两个函数，分别是get和set，读取计算属性的时候走get方法，设置计算属性值得时候，就走set方法，set方法中的参数就是要设置的新值，可以再get方法内部进行条件判断，决定是否使用其新值
对于计算属性，直接当成普通属性使用即可
不能加括号作为函数使用 ，他代表一个函数的返回值
如果把它写在methods里面，那么他就是一个函数的方法
计算属性实现的效果，使用函数也都可以实现，，但是尽量使用计算属性，计算属性更加加高效，对于取值来说，只有当值发生改变，计算属性内部的函数才会执行一次，而函数会使用几次就执行几次
9.实例属性
vm.$data
vm.$el
vm.$parent
vm.$root
vm.$children
在路由分级时，会用到children
10.实例方法vm.$watch
同angular，
// 使用$watch可以监测某个值得变化
vm.$watch('a',function(newValue,oldValue){
console.log("newValue="+newValue);
console.log("oldValue="+oldValue);
})
返回一个函数，用来停止触发回调
var unwatch = vm.$watch(‘a’, cb);
unwatch();
二、组件
类似于angular的自定义指令，用来封装重复使用的代码块
注册组件
如果需要换行，可以使用普通字符串，后面用\拼接，或者使用模板字符串
Vue.component('hello',{
template:'\
我是hello
\
我是HELLO标签
\
我是HELLO标签{{msg}}
\
',
data(){//组件中的data数据，必须是函数，数据通过return进行返回
// 组件中的data必须是函数的原因是：每个组件欧拥有自己独立的数据，不与其他共享，因为共享数据后，会相互影响，导致数据错乱
return {
msg:'message'
};
}
})
在html代码中，只需要加入这是一个全局的标签
其中template对应的是被替换过去的HTMl模板结构；
必须存在一个跟标签(root element)
下面创建一个局部的实例
var vm=new Vue({
el:'#app',
components:{//局部组件直接写在实例的components中，其他实例无法使用。
hi:{
template:'我是hi标签
'
}
}
})
父组件与子组件的传值props
在这里需要提一下引用类型；
数组和对象都是引用类型，其他的都是普通的值类型
var arr=[1,2,3,4];
var arr2=arr;
arr2.push(5);
此时arr与arr2同时都变成了[1,2,3,4,5];
这是因为arr定义一个数组，就会开创一个空间，并把值都传到空间，然后arr指向了这个空间，定义一个arr2,让他等于arr，这时arr2也指向了这个空间，所以通过这两个随意改变指都会影响到另一个，这样的数组就是引用型。此仅为个人理解。
组件内部的props里面的值都是组件的属性，用于接受外界的值，然后赋值到组件内部
message={{msg}}
'
})
父组件与子组件之间的传值
message={{msg}}
'
})
var vm=new Vue({
el:'#app',
data:{
msg:'message'
}
})
在页面显示的message=message
这里的props是单向数据流的，但是对于引用类型的数组对象不能单向；
使用slot分发
作用类似于angular的ng-transclude嵌套元素；
Vue.component('my-app',{
template:`
我是my-app
如果没有分发内容，显示我
如果没有分发内容，显示我
`
})
具名slot的使用
h2
h3
h4
如果写两遍slot，那么就会打印两遍，但会报错;但是，如果把他变成具名属性，就可以正常使用了
// export导出
// import导入
三、使用vue做一个项目
命令行内：
1.通过命令行安装vue脚手架
npm install -g vue-cli
2设置项目名称
vue init webpack 项目名
cd 项目名
npm install
npm run dev运行项目默认打开8080端口
路由
路由安装
npm install vue-router
npm run dev
完成之后进行的步骤：
在main.js中
1.import VueRouter from 'vue-router'//引入路由文件
引入home
import Home from 'home'
//2.安装插件main.js
Vue.use(VueRouter)
3.编写页面在app.js
4.定义路由main.js
const routes=[
{path:'/home',component:Home}
path对应的是app.js 中to="/home"
components对应的是引入的名称
]
其中的
const routes=[
{ path: '/', component: Home }
表示打开默认显示home页面
]
5创建VueRouter实例main.js
const router = new VueRouter({
routes//这是简写(routes:routes)
})
6.在main.js中的
new Vue({
el: '#app',
template: '添加一个文件夹在src文件夹下，里面添加我们需要的页面，每个页面只需要一个后缀名为vue的文件，里面就包含了html，css和js的所有内容。其中html写在内，并且在里面添加一个根标签，把内容都放在我们设置的跟标签里面
和angular不同的是，路由跳转没有直接使用a标签的锚点，而是有它专用的标签
，同样，也不需要使用ui-view,而是它专用的
replace属性
tag属性,会渲染成tag指定的标签
Home Home
active-class属性
这个属性是设置激活链接时的class属性
Home
active-class属性的默认值是router-link-active
exact属性
开启router-link的严格模式
home
二级路由
先引入
import One from 'one',
import two from 'two',
const router=[
{path:'/home',component:Home,children:[
{path:'one',component:One},
{path:'two',component:two},
]}
]
One
网络请求
npm install vue-resource
安装
Vue.use(VueResource)
export default{
data(){
return {
data:[]//把返回的数据都放到数组中
}
},
mounted(){
this.$http.get().then(function(res){
console.log(res);
// console.log(JSON.parse(res.body).data);
this.data=JSON.parse(res.body).data;
})
}
}
网络请求使用mounted
引用第三方js库：
在需要的.vue文件中，script里面引入；
import $ from '../../static/lib/jquery-3.1.1.min.js'
就这么简单
export default{
data(){
return (
//定义的变量写这里
data:[];
name:'xiaoming'
)
},
mounted(){
//js代码写在这里
在引用swiper时，把swiper的js代码放到这里，如果是动态创建的元素，
建议用setTimeout包住
new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,
autoplay:2000,
speed:1000,
autoplayDisableOnInteraction:false,
pagination: '.swiper-pagination',
})
}，
methods:{//方法写这里
get(){}
}
}