对vue概念的理解

概念：vue是一个构建数据驱动的web界面的渐进式框架，它的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

vue对比angular
1、vue在设计之初参考了很多angularjs的思想
2、vue相对比与angular比较简单
3、 vue相对比与angular比较小巧，运行速度快
4、 vue与angular数据绑定都可以用｛｛｝｝
5、vue指令用v－xxx angularjs用ng－xxx
6、vue数据放在data对象里面，angular数据绑定到$scope对象上

vue对比react
1、vue与react都使用 virtual DOM
2、vue与react都提供了组件化的视图组件
3、 vue与react将注意力集中保持在核心库，有丰富的插件库
4、react使用jsx渲染页面，vue使用更简单的模版
5、vue比react运行速度更快
计算属性放在computed:{//函数} 效率高 methods设置效率低

vue基础语法：
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的
Var vm=new Vue({})

基础属性：
el:获取执行vue的dom元素－初始化范围
data ：存储数据
methods ：执行的方法

1)绑定数据
{{}} 或者 v-text=“” 只能绑定纯文本
绑定html angular中 ng-bind-html vue中 v-html
表达式在{{}}中 ±*/ 直接可用三木运算一样可用

2）事件绑定
v-on:click=“” 或者 @click＝“”
绑定事件－－事件中有event对象函数参数为 $event
操作数据通过this操作

3)其他指令
v-for=“item in list” 循环 item循环到的数组值
v-for=“(item,key) in list” key循环到的下标index
v-model=“” 表单元素value 不可直接{{}}获取，需在vue初始化设置一下
v-if 布尔值为true 代表节点消失
V-if 与 v-else-if v-else 可以构成判断
V-show布尔值为true 代表节点设置了display:none属性
无v-hide (不要任意猜测)
V-once 一次渲染

行间样式设置

v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
data: {
            activeColor: 'red',
            fontSize: 30
        }

v-bind:style的对象语法十分直观——看着非常像 CSS，其实它是一个JavaScript对象
数组样式形式设置

v-bind:style=“[styleObjectA, styleObjectB]”
 
data: {
                styleObjectA: {
                    color: 'red'
                },
                styleObjectB: {
                    fontSize: '30px'
                }
            }

类名设置
v-bind:class=“{‘class-a’:isa,‘class-b’:isb}”
Isa isb 值为true 添加相应类名
为false 不添加类名
对象形式设置

<div :class="classobj"></div>
classobj:{
	active:true,
	'class-a':true,
	'class-b':true
}

绑定属性 v-bind:id=“data内的属性值” 或者 :id=“data内的属性值” 两种方法
（src title class name等属性写法一样）
计算属性computed与methods的区别：
computed：效率高
methods：设置效率低
bootstrap＋vue实现todolist

<div id="vue_det">
    <input type="text" v-model = "ipt" />
    <button @click="tap()">添加</button>
    <table class="table">
        <tr v-for="(item,i) in this.arr ">
            <td>{{i}}</td>
            <td>{{item}}</td>
            <td @click="tap2(i)">删除</td>
        </tr>
    </table>
    <script>
        var vm = new Vue({
            el:'#vue_det',
            data:{
                ipt:"",
                arr:[],
            },
            methods:{
                tap(){
                    this.arr.push(this.ipt);
                    this.ipt='' ;
                },
                tap2(i){

                    this.arr.splice(i,1)
                }
            }

        })
    </script>
</div>

实现金额结算：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
       单价：<input type="text" v-model="a">
        数量：<input type="text" v-model="b">
        运费：<span>{{yunfei}}</span>
        总价：<span>{{sum}}</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#box',
            data:{
                a:'',
                b:'',
                yunfei:10
            },
            computed:{
                sum(){
                  if(this.a*this.b<88){
                      this.yunfei=10;
                      return this.a*this.b+this.yunfei;
                  }else{
                      this.yunfei=0;
                      return this.a*this.b+this.yunfei;
                  }

                }
            }
        })
    </script>
</body>
</html>

实现筛选数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="ipt">
        <li v-for="item in list">{{item}}</li>
    </div>
    <script>
        var vm = new Vue({
            el:'#box',
            data:{
                ipt:'',
                arr:["香蕉","香梨","西瓜","草莓","苹果","橘子"]
            },
            computed:{
                list(){
                    let arr1=[];
                    this.arr.map(function(item){
                        if(item.indexOf(this.ipt)!=-1){
                            arr1.push(item);
                        }
                    }.bind(this))
                    return arr1;
                }
            }
        })
    </script>
</body>
</html>

监听
第一种写法vm.$watch(‘’,function( newvalue,oldvalue){ })
第二种写法直接在vue初始化中通过
watch｛msg:function(newvalue,oldvalue){}｝
过滤器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <table class="table">
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>状态</th>
                <th>备注</th>
            </tr>
            <tr v-for="(item,i) in arr">
                <td>{{i}}</td>
                <td>{{item.name}}</td>
                <td>{{item.status}}</td>
                <td>{{item.status | guolvqi}}</td>
            </tr>
        </table>
    </div>
    <script>
        Vue.filter("guolvqi",function(value){
            // return value;
            if(value == 0){
                return "订单完成";
            }else if(value == 1){
                return "订单待支付";
            }else{
                return "订单异常";
            }
        })
        var vm = new Vue({
            el:'#box',
            data:{
                arr:[{name:"毛衣",status:0},{name:"裤子",status:1},{name:"帽子",status:0},{name:"T恤",status:2}]
        }
        })
    </script>
</body>
</html>

vue2.0自定义过滤器，交互用axios或fetch
vue1.0提供内置过滤器，交互用resource

axios({
	method:'get',
	url:"data.json"
}).then(function(data){
	console.log(data.data)
}).catch(function(){})

fetch("data.json")
.then(function(data){
	return data.json()
}).then(function(data){
	console.log(data)
})

事件

1）函数内部阻止事件冒泡 e.cancelBubble=true;
2）标签内阻止事件冒泡 @click.stop=“show1()”
3）键盘事件 keydown 函数中获取键盘编码keyCode
4）在标签内直接绑定按键事件 @keyup.13=“show()” @keyup.enter=“show()”

生命周期：
8个常用钩子函数：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed
组件也是标签，组件的本质是对象
script标签放在body中会阻碍进程的加载

父组件----子组件：
通过在子组件标签上绑定自定义属性式指令，值为传递的数据，子组件内部通过props属性进行属性名的接受（数组形式），子组件模板内，直接解析加载接受的属性名。

子组件—父组件：
通过在子组件标签上绑定自定义事件，子组件内部通过emit进行数据推送，父组件通过事件调用函数参数进行数据接收。
∗∗平行组件：∗∗通过空的‘vue‘对象调用‘ emit进行数据推送，父组件通过事件调用函数参数进行数据接收。
**平行组件：**通过空的vue对象调用`emit进行数据推送，父组件通过事件调用函数参数进行数据接收。
∗∗平行组件：∗∗通过空的‘vue‘对象调用‘emit进行自定义事件以及数据的推送，在需要接受的组件内部通过空的vue对象调用$on进行事件接收，函数参数为接收的数据（其中接收时要改变this指向）

1、安装vue脚手架：全局安装：npm install --global vue-cli

2、项目构建：官方模板：vue init webpack my-project（注：代码语法检查较麻烦）推荐 vue init webpack-simple my-project

3、项目启动：npm run dev 项目打包：npm run build 安装插件 axios npm install axios --save-dev 在哪个文件中需要使用，就在该文件的js中导入：import axios from ‘axios’`

路由 vue-router（路由规则配置均在main.js中）
安装依赖 npm install vue-router --save-dev
使用时在main.js引入import VueRouter from ‘vue-router’
声明使用在main.js 中 Vue.use(VueRouter)

Vue ui框架
Element －－pc (算是目前支持vue2.0最好的ui框架)
Mintui
Vux
Framework7
Tips；vue全家桶指（vue+vuex+vue-router+axios）

v-if VS v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

vue 和react相比优势
相似之处：
1、使用virtual DOM
2、提供了响应式和组件化的视图组件
3、将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库
优势：
在react应用中，当某个组建的状态发生变化时，它会以该组件为根，重新渲染整个组件子树，如要避免不必要的子组件的重新渲染，你需要在所有可能的地方使用PureComponent，或是手动实现shouldComponentUpdate方法，同事你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。

然而，使用PureComponent和shouldComponentUpdate时，需要保证该组件的整个字数的渲染输出都是由该组件的props所决定的，如果不符合这个情况，那么此类优化就会导致难以察觉的渲染结果不一致，这使得react中的组建优化伴随着相当的自南至负担。

在vue应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染，你可以理解为每一个组建都已经自动获得了shouldComponetUpdate，并没有上述的子树问题限制