一、MVVM
View，Model是Vue.js的核心。
实例化Vue的过程就是定义MVVM各个组成部分的过程。
1. 定义View
2. 定义Model
3. 创建一个Vue实例或"ViewModel"，它用于连接View和Model
举例：
<!--这是View-->
<div id="app">{{message}}</div>
//创建一个Vue实例，它连接 View 与Model
new Vue({
el: '#app', （连接）
//这是Model
data:{
message:'Hello World!'
}
})
在vue中要使用data中定义的参数，用this.message
（angularjs中用$scope.message）
与angulajs的区别：angularjs需要ng-app和ng-controller，vue直接用id即可；angularjs定义数据$scope.参数名，vue要在data：中定义，方法也要在methods或者computed中定义，若要在方法中使用参数，要用this.参数名
二、指令
1.数据绑定
1）v-text={{}} (angular js 是 ng-bind和{{}})
（这两个是一样的，{{xxx}},这种情况是有弊端的，当网速很慢或者javascript出错时，会暴露{{xxx}}）
<span v-text="message"></span>=
<span>{{message}}</span>
2）.v-html
（有html标签，用v-text是输出不出来的）
<div v-html="message"></div>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>' } })
得到<div>
<h1>菜鸟教程</h1>
</div>
在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用v-html。
2.判断
1）v-show（angularjs中是ng-show）
根据表达式之真假值，切换元素的 display CSS 属性。（DOM已经加载出来了）
2）.v-if和v-else和v-else-if(angularis中是ng-if、ng-else)
v-else和v-if一起出现，且里面不用放参数，和if相反
用来判断是否加载html的DOM（DOM还没有加载出来）
- • v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
- • v-show：调整css dispaly属性，可以使客户端操作更加流畅。
v-if的安全级别更高，v-show只是隐藏了，通过页面源代码还是可以看到，安全级别低、
v-if更高的切换消耗（切换消耗指从未加载到加载或者从加载到未加载的状况，需要添加或删除这个元素），v-show需要更高的初始化渲染消耗
因此如果需要频繁切换而对安性无要求，使用v-show；如果运行时，条件不能改变，使用v-if
3．循环v-for(angularjs是ng-repeat=“（key,value） in values”索引在前面)
(item,key)索引值放在后面！！
还可以（index, key,item）
<div v-for="(value, key, index) in object">
（自己试吧）
<li v-for="item in items">
{{item}}
</li>
v-for的应用：排序
用到了Vue的computed:或methods：属性。定义方法的属性
定义
var app =new Vue({
el:"#app",
data:{
items:[20,23,18,65,32,19,5,56,41]
},
computed:{
sortItems:function(){
//这个现成的sort方法只能给位数一样的进行排序，所以调用了sortNumber这个方法，这个方法在后面定义，记住这个方法即可
return this.items.sort(sortNumber);
}
},
methods:{
methodSort:function(){
return this.items.sort(sortNumber);
}
}
})
function sortNumber(a,b){
return a-b
}
直接用sort方法只能排序同样位数的，所以要用sortNumber
调用computed和methods的方法时，都可以不加（）
计算属性 ：和普通属性一样是在模板中绑定计算属性的，当data中对应数据发生改变时，计算属性的值也会发生改变。
Methods：methods是方法，只要调用它，函数就会执行。
相同：两者达到的效果是同样的。
不同：计算属性是基于它们的依赖进行缓存的，只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变，只会返回之前的结果，不再执行函数。
<div>{{sortItems}}</div>
<div>{{methodSort}}</div>
v-for循环数组，对象都可以
students:[
{name:'jspang',age:32},
{name:'Panda',age:30},
{name:'PanPaN',age:21},
{name:'King',age:45}
]
<ul>
<li v-for="student in students">
{{student.name}} - {{student.age}}
</li>
</ul>
4．事件监听v-on
v-on:事件=“方法”
v-on: 还有一种简单的写法，就是用@代替。
<button @click="jianfen">减分</button>
<button v-on:click="jiafen">加分</button>
<button v-on:click="jianfen">减分</button>
var app=new Vue({
el:'#app',
data:{
count:1
},
methods:{
jiafen:function(){
this.count++;
},
jianfen:function(){
this.count--;
}
}
})
键盘回车事件v-on:keyup.enter,
回车：@keydown
常用：@keyup
@mousedown
@mouseover
@submit
https://www.cnblogs.com/xcsn/p/3413074.html
阻止冒泡：event.stopPropagation(); 或者直接 @click.stop="方法"（事件修饰符）
阻止默认事件：event.preventDefault() 或者直接@submit.prevent（事件修饰符）
5．数据双向绑定v-model（和angularjs中的ng-model是一样的）
必须用input框（或者其它textarea、 radio等）, 使用时必须先在data中定义一下。
<input type="text" v-model="message">
6．属性v-bind（一切css样式都可以绑定）
可以省略写：
<a :href="url"></a>
<img v-bind:src="imgSrc" width="200px">
经常使用v-bind来绑定css样式
1）、直接绑定class样式
<div :class="className">1、绑定classA</div>
2）、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
<div :class="{classA:isOk}">2、绑定class中的判断</div>
3）、绑定class中的数组
<div :class="[classA,classB]">3、绑定class中的数组</div>
4）、绑定class中使用三元表达式判断
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
5）、绑定style
<div :style="{color:red,fontSize:font}">5、绑定style</div>
6）、用对象绑定style样式
<div :style="styleObject">6、用对象绑定style样式</div>
var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})
7．其它指令
1）v-pre指令
在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
<div v-pre>{{message}}</div>
页面会显示{{message}}
2)v-cloak指令( 类似ng-clock解决未加载完的问题)（不会用）
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
3)v-once指令
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
<p>可以改变：{{ msg }}</p>
<p v-once>不可以改变：{{ msg1 }}</p>
（vue.js 较少用到自定义指令，因此就不放在这了）
三、组件（标签）（定义时data必须是function，return数据）(可以extend定义后，再用component，直接定义比较简单易懂)
Component组件
1、初始组件
组件就是制作自定义的标签，这些标签在HTML中是没有的。
1）、全局化注册组件（全局的也必须放在vue作用域的里面才管用）
<div id="app">
<jspang></jspang>
用<jspang></jspang>代替template中的内容
</div>
这种只能定义一个，一个组件名定义一个组件，所以是component
Vue.component('jspang组件名',{
template:`<div style="color:red;">全局化注册的jspang标签</div>`
})
var app=new Vue({
el:'#app',
data:{
}
})
2）、局部注册组件局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。
<div id="app">
<panda></panda>
</div>
var app=new Vue({
el:'#app',
可以定义多个，所以要加s
components:{
"panda":{
template:`<div style="color:red;">局部注册的panda标签</div>`
}
}
})
3）、组件和指令的区别
组件注册的是一个标签，而指令注册的是已有标签里的一个属性。之后会在标签中加属性。Angularjs 就擅长用指令，在实际开发中还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好。
2、父子组件间的传值
1）父传子
parent: <template id="p">
<sub :id="id"></sub>
</template>
new Vue({
el:"#p",
data:{ id:10} ,
sub: compoments:{
sub:template:"<h1>{{id}}</h1>",
props:["id"]
}
2)子传父
parent: <template id="p">
<sub @send="getdata"></sub>
</template>
new Vue({
el:"#p",
methods:{
getdata(input){
alert(input);
}
},
sub: compoments:{
sub:template:"<div><button @click="senddata"></button></div>",
methods:{
senddata(){
this.$emit("send","hello");
}
}
}
四、过滤器
内置过滤器全部取消
1、私有过滤器
<div id="app">
<td>{{col|capitalize}}</td>
</div>
new Vue({
el: '#app',
data: {
col:asdasd
},
filters: {
capitalize: function (value) {
return value.charAt(0).toUpperCase() + value.slice(1);
}
},
});
2、全局过滤器
<div id="app">
<!-- 首字符串大写 -->
<div>首字母大写过滤器：{{str | upcase}}</div>
<!-- 给过滤器传入参数 -->
<p>求和过滤器：{{message | sum(10,20)}}</p>
</div>
//全局方法 Vue.filter()注册一个自定义过滤器,必须放在Vue实例化前面
// 注册一个首字母大写的过滤器
Vue.filter("upcase", function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
});
// 全局注册一个求和过滤器
Vue.filter('sum', function (value, a, b) {
return value + a + b;
});
var demo = new Vue({
el: "#app",
data: {
str:'hello',
message:12
}
五、路由
<div id="app">
<div class="content">
<router-link to="/goods">商品</router-link>
<router-link to="/ratings">评论</router-link>
<router-link to="/seller">商家</router-link>
</div>
<router-view></router-view>
</div>
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';
var router = new VueRouter
({
routes:[
{ path: '/goods', component: goods },
{ path: '/ratings', component: ratings },
{ path: '/seller', component: seller },
{ path: '/', redirect: seller }
];
})
var app = new Vue({
el: '#app',
router
});
路由传参：
<router-link :to="'/news/newsinfo/'+item.id"> 这块有了参数
{path:"/news/newsinfo/:id",component:newsinfo},
接受参数：created(){
this.id=this.$route.params.id;
再根据这个id请求数据等操作
},
六、ajax请求数据
目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据。使用 、cnpm install axios -S
安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个需要发送请求的组件中即时引入
首先在 main.js 中引入 axios
import axios from 'axios'
Vue.prototype.$ajax = axios
就可以在其它组件中使用
this.$ajax({
method: 'post',
url: '/user',
data: {
name: 'wise',
info: 'wrong'
}
})
}
this.$ajax({
method: 'get',
url,
}).then((res)=> {
console.log(res);
this.list=res.body;
});
用=>是因为this不指代vue了，所以用this
还有一种办法是：// let that = this （不能用var）