vue项目初步入门

1. npm init -y   初始化项目，生成package.json文件，管理js的依赖以及项目版本等。

2. npm install vue --save    安装vue依赖，其中--save是指只在当前目录的生效，-g则是在全局生效。安装后，会生成一个node-modules的目录，其中src放的是源文件，dist放的是编译后的文件，我们在js引入vue框架时，指向的目录通常应该是dist目录下的文件。

3. vue 的生命周期，参考学习地址https://www.jianshu.com/p/5cd198945d41

4.vue 的事件修饰符，参考学习https://blog.csdn.net/qq_29468573/article/details/80769778

（１）. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）

（２）. prevent：阻止默认事件的发生

（３）. capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。

（４）. self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响

（５）. once：设置事件只能触发一次，比如按钮的点击等。

（６）. passive：该修饰符大概意思用于对DOM的默认事件进行性能优化

5.v-for 遍历数组及对象的实现。

　　遍历数组时，user是遍历出的value，i则是数组下标。遍历对象时，v是value，k是对象属性名称，i则是下标。vue推荐v-for遍历时，使用:key，并赋予一个唯一属性值，例如下方user.id或者i，这样会提高数据变化时的渲染效率。

        <ul>
            <li>遍历数组</li>
            <li v-for="(user,i) in users" :key="user.id">
                {{i}}_{{user.name + "," + user.age}}
            </li>
            <li>遍历对象</li>
            <li v-for="(v,k,i) in users[0]" :key="i">
                {{i}}_{{k}}_{{v}}
            </li>
        </ul>

            data: {
                name: "小时光",
                num: 1,
                users:[
                    {name: "小一", age: "19", id: "0428"},
                    {name: "小二", age: "33", id: "0429"},
                    {name: "小三", age: "24", id: "0430"}
                ]
            },

 6.v-if 和 v-show的区别。

　　v-if隐藏Dom元素时，是把Dom整个删除；v-show隐藏时则是给Dom设置style=“display:none”。相较而言，v-show效率比比较高，适用于Dom元素经常变化的状况，v-if则适用于一次性的属性变化。

7.v-text和v-html的区别

　　v-text显示的是纯文本，v-html则可以识别html样式。

8.v-bind通常用于动态使用class或者style，使用v-bind之后，可以在class内使用data定义的数据。

  v-bind:class通常可以简写为:class。

9.计算属性computed可以直接在差值表达式中使用（虽然像方法，但实质却是属性，用法和普通属性一样）。另外，计算属性只在初始化是做一次计算，后续会将计算结果保存，再次使用时会直接调用保存的计算结果。

         <h>
            {{brith}}
        </h>        


           computed: {
                brith(){
                    const brith = new Date(this.brithday);
                    return "生日：" + brith.getFullYear() + "年" + brith.getMonth() + "月" + brith.getDay() + "日"
                }
            }

10.watch，数据监听。

　简单监听，普通数据（数字，String，数组等）使用普通监听就可以了。数字和String的newVal和oldVal分别显示的是变化前的值和变化后的值。数组监听时则newVal和oldVal相同，都为新值。

            data: {
                nums:[0,1,2,3]
            },
            watch: {
                nums(newVal, oldVal){
                    console.log(newVal, oldVal);
                }
            }

　　

　当对象需要监听时，则需要用到深度监听，deep属性，并且重写handler方法。　

           data: {
                user: {name: "小三", age: 24, id: "0430"}
            }, 
    
           watch: {
                user:{
                    deep: true,
                    handler(newVal){
                        console.log(newVal.age, oldVal.age);
                    }
                }
            }                

上面使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性（控制是否在属性首次赋值的时候做监控）。  比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

new Vue({
  el: '#root',
  data: {
    cityName: ''
  },
  watch: {
    cityName: {
    　　handler(newName, oldName) {
      　　// ...
    　　},
    　　immediate: true
    }
  }
})