vue学习-1

vue+component+vue-router+vuex+axios
库：相当于功能比较全的产品，想用时拿取产品中的一部分使用就可以。
框架：为了解决一系列问题而产生的产品，使用时只能按照他的规定来用。

传统的后端是MVC
=> view 浏览器页面=> controller路由配置（控制器） =>model（模型）
前端的MVVM模式：
=> View （html页面）<=> ViewModel（核心调度者，协调器） <=> Model(静态的数据)

官网：https://cn.vuejs.org/v2/guide/
使用：npm install vue -D

使用cdn,也可以下载到本地放到项目中，使用时，引入即可

Mustache语法(js语句都不可以放到{{}}里)

js表达式：
1.变量(data中声明)
2.可以运算
3.三元运算符
4.不可以定义变量，赋值，定义函数
5.可以放函数的返回值
代码：
index.html:

<script src="./vue.min.js"></script>
 <div id="app">
        <!-- {{msg>5?'a':'b'}} -->
        <!-- {{(function fn(){return 10})()}} -->
        <!-- {{[1,2].map(n=>n*2)}} -->
        <!-- {{obj}} -->
        <!-- {{ {name:1} }} 加上空格就可以显示对象 -->
        <!-- {{b}} -->
        {{arr}}
</div>
<script>
    let vm = new Vue({ //vm是vue的实例
        el: '#app', //把vue实例挂载到dom元素id为app上
        data: { //把数据放入到响应式系统中，数据发生改变，页面视图发生改变
            msg: 3,
            msg2: 4,
            obj: {
                name: 1
            },
            arr: [1, 2, 3],
            b: 0
        }
    })
    // vm.msg == data.msg 会把vue选项中所有的数据挂载到vm实例上
    // vm.b = 10; //b先要在data中声明下
    // vm.obj.age=10; //不可以直接更改根级别的对象，这么写页面中是没有这个age属性的
    // 可以使用如下方法给实例添加方法
    // vm.$set(vm.obj, 'age', 10); //==Vue.set()
    // 也可以使用Object.assign()合并对象
    // vm.obj = Object.assign({}, vm.obj, {
    //     age: 33,
    //     color: 'red'
    // })

    // 数组的限制：
    // 1.不可以直接通过索引更改数组
    // 2.不可以通过数组的长度更改数组,以下例子不生效，由于限制
    // vm.arr[1] = 5;
    // vm.arr[vm.arr.length - 1] = 8;
    // 若想更改数组，可以使用vm.$set() => vm.$set(vm.items,indexOfItem,newValue);
    // vm.$set(vm.arr, 0, 5);  => [5,2,3]
    //也可以使用变异的方法（更改原有的数据）：push,pop,shift,unshift,sort,reverser,splice
    // vm.arr.splice(0, 1, 5); //索引0开始，用5替换1，用最后的内容替换删除的内容
    // ----也可以使用非变异方法，不会改变原有的数组，使用新数组替换旧数组就行filter(),concat(),slice()
Vue实例的方法：
    1.vm.$set/vm.$delete 更改/删除对象或数组
    2.vm.$el  获取挂载的DOM元素
    3.vm.$data 获取响应式数据
    4.vm.$options 所有的配置项
    5.vm.$watch 监视数据的变化
    6.vm.$nextTick 获取真实的DOM元素
    7.vm.$mount 设置Vue实例挂载的DOM元素

Vue指令

指令都是以v-xx，v-开头，表示有特定的功能，用来操作DOM元素
v-text 默认渲染成文本
v-html 渲染成HTML（可以识别标签）
v-once 只渲染一次，再更改时，直接从缓存中获取
v-for 遍历数组，字符串，对象，想遍历谁，就在谁身上加v-for, key 增加唯一值，避免同一父元素下同一元素复用
v-if/v-else/v-else-if 操作DOM元素，控制DOM元素的显示隐藏，一旦条件不成立，DOM元素不存在【可以使用在标签上】
v-show 更改样式，显示/隐藏（满足条件就显示，不满足就隐藏）【v-show 不支持元素，也不支持 v-else。】

v-if和v-show对比：

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if是惰性的，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show就简单的多，不管初始条件是什么，元素总是会被渲染，并且只是基于css的display进行切换。
结论：
v-if有更高的切换开销，而v-show有更高的初始渲染开销。
所以，非常频繁的切换，推荐使用v-show；若运行时条件很少改变，则推荐使用v-if。

v-if不要和v-for在同一个标签使用，因为v-for优先级高于v-if
v-on 简写@ 绑定事件
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 采取捕获的方式
.self 操作是自己时才会触发
.once 只触发一次
.passive 处理事件函数中不会调用preventDefault函数，减少额外的监听，提高了性能不能和prevent同时使用
v-bind 简写: 绑定动态的属性
v-model 双向绑定
.lazy 延迟显示，在失去焦点时触发(调用的是change事件不再是input)
.number 若是字符串会转化为数值
.trim 自动过滤空格
注意：指令后面的值一般是一个变量，不是一个字符串

自定义指令：

使用：<input type="text" v-focus.color="c">
// 自定义全局指令 使用是直接v-focus
    Vue.directive('focus', {
        // 以下是他的钩子函数
        // 指令初始化时调用：
        bind() {
            console.log('初始化')
        },
        // 当被绑定的元素插入到dom时
        inserted: function (el, bindings, vnode) {
            // el绑定的元素，bindings指令的参数，vnode虚拟的节点
            // console.log('插入dom元素')
            // console.log(bindings)
            if (bindings.modifiers.color) {
                // 将获取到的值设置为背景色
                el.style.backgroundColor = bindings.value;
            }
            Vue.nextTick(() => {
                el.focus() //有时候页面没有自动获取焦点，可能是还没有加载成功，为了解决可以放到Vue.nextTick事件中
            })
        },
        update() {
            console.log('指令更新时触发')
        },
        unbind() {
            console.log('指令和绑定的元素解绑时')
        }
    });
//这是局部的自定义指令，因在#App，所以只在这个实例中起作用
var vm = new Vue({
    el:'#app',
    data:{
        c:'red'
    },
    methods:{

    },

    directives: { 
        'focus': {
            // 指令初始化时调用：
            bind() {
                console.log('初始化')
            },
            // 当被绑定的元素插入到dom时
            inserted: function (el, bindings, vnode) {
                // el绑定的元素，bindings指令的参数，vnode虚拟的节点
                // console.log('插入dom元素')
                // console.log(bindings)
                if (bindings.modifiers.color) {
                    // 将获取到的值设置为背景色
                    el.style.backgroundColor = bindings.value;
                }
                Vue.nextTick(() => {
                    el.focus() //有时候页面没有自动获取焦点，可能是还没有加载成功，为了解决可以放到Vue.nextTick事件中
                })
            },
            update() {
                console.log('指令更新时触发')
            },
            unbind() {
                console.log('指令和绑定的元素解绑时')
            }
        }
    }
})

Vue响应式原理，参./Vue的响应式原理.js

watch与computed对比

若一个属性依赖于其他属性的变化，推荐优先使用computed。

watch 监视属性，当属性发生改变时触发必须在data中已经声明第一种写成函数，第二种写成对象可以有异步操作
computed 计算属性不能在data中声明过每一个计算属性都有get,set方法不能异步操作依赖属性发生改变，则计算属性才发生改变，若没有改变，则直接从缓存中读取之前的值，不会重新渲染，大大的提高性能

data: {
firstName: ‘Foo’,
lastName: ‘Bar’,
// fullName: ‘Foo Bar’ //使用computed计算属性，不能在data中声明过，用watch时需要
},
watch使用：

computed的使用:

animate 动画

根据提供的六个类名：
有一个box，样式为：
.box {
width: 100px;
height: 100px;
background: red;
}

    .v-enter {
        background: gray;
    }

    .v-enter-active {
        background: greenyellow;
        transition: all 2s linear;
    }

    .v-enter-to {
        background: fuchsia;
    }
    /* 进入状态结束会变成默认的背景色即红色 */

    <!-- 这是离开的状态： -->
    .v-leave {
        background: goldenrod;
    }

    .v-leave-active {
        background: hotpink;
        transition: all 2s linear;
    }

    .v-leave-to {
        background: indigo;
    }

    /* 离开状态结束会消失 */

    <transition>
        <div class="box" v-if="isShow">box</div>
    </transition>
    若在html中改了名字，name="fate",上面的类名就是.fate-enter,.fate-enter-active,.fate-enter-to,.fate-leave,.fate-leave-active,.fate-leave-to

有个添加到购物车的页面，demo，在./添加到购物车html

学习代码在github中，学习代码

Mustache语法(js语句都不可以放到{{}}里)

Vue指令

v-if和v-show对比：

自定义指令：

Vue响应式原理，参./Vue的响应式原理.js

watch与computed对比

animate 动画

vue學習-1

npmError: EPERM: operation not permitted,...

vue學習-2-組件及組件通訊

vue-cli-service-golbal使用不生效

npm取消和配置代理

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結