打开Vue的新大门（Vue.js从入门到精通）第一页

---

前言

Vue前端学习迫在眉睫！！！！！话不多说，直接开始！

---

一、搭建Vue开发环境

1.下载vue

vue有两个版本：

开发版本(vue.js)可以在代码出现错误的时候出现提示改正，而生产版本(vue.min.js)则不会出现任何提示。
因此我们在实际开发的时候一般选择开发版本进行下载安装，等产品上线的时候，为了减少项目的大小，可以换为生产版本。
下载地址：
https://v2.cn.vuejs.org/v2/guide/installation.html

2.引入vue：

两种方式：

（1）<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
（2）<script type="text/javascript" src="../js/vue.js"></script>//src指的是你自己下载的vue放置的地址。

二、初识Vue

上图中的root容器是代指id或者class为root的容器。

注意： 区分js表达式和js代码(语句)
（1）js表达式：表示产生一个值，可以放在任何需要值的位置。例如：a，1+1，三目表达式：x === y ? ‘a’ : 'b’等。
（2）js代码(语句)：例如if(){}，for(){}。
（3）js表达式是特殊的js代码。

简单代码示例如下：

1.root容器

<div id="root">
   <h1>hello,{{name}},{{address}},{{Date.now()}}</h1>
</div>

2.vue实例

<script type="text/javascript">
   new Vue({
        el:'#root',//el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串
        data: {//存储数据，供el所制定的容器去使用
            name:'ZhangSan',
            address:'http://andisnai.com'
        }
    })

页面展示如下：

三、Vue模板语法

1.插值语法

• 功能：解析标签体内容（标签体：起始标签与结束标签中间夹着的内容，例如：<h1>插值语法</h1>中的“插值语法”即为标签体内容）
• 写法：{{xxx}}，xxx为js表达式，并且可以读取到vue实例中data中的所有属性

示例如下：

<div id="root">
	<h3>你好，{{name}}</h3>
</div>

new Vue({
        el:'#root',
        data:{
            name:'jack',
        }
    })

注意：
插值语法的使用时机：如果想要放值的地方处于标签体中时，则可用插值语法。

2.指令语法

• 功能：解析标签(包括：标签属性、标签体内容、绑定事件等)
• 例如：v-bind:href=“xxx” 可以简写成 :href=“xxx” ，xxx也指js表达式，并且可以读取到vue实例中data中的所有属性

示例如下：

<div id="root">
	<a v-bind:href="url">点我跳转</a>
</div>

new Vue({
        el:'#root',
        data:{
            url:'http://www.baidu.com'
        }
    })

注意：
如果使用插值语法时有多个相同名字的属性值，那么处理方法就是：
（1）在data里把相同名字的属性改为不同名字
（2）在data里把相同名字的属性划分成不同层级
示例：

new Vue({
     el:'#root',
       data:{
           name:'jack',
           school:{
              name:'marry',
           }
       }
   })

使用“jack”时用{{name}}即可，使用“marry”时，使用{{school.name}}

四、Vue数据绑定

1.单向数据绑定

• 单向绑定：数据只能从data流向页面
• 语法：v-bind

示例：

单向数据绑定：<input type="text" v-bind:value="name">

注意：此时name指data中的name属性

原理图解：

注意：
（1）改变input框里的值不会改变其value值。
（2）v-bind:value=“name” 可以简写成 :value=“name” 。

2.双向数据绑定

• 单向绑定：数据不仅能从data流向页面，也可以从页面流向data
• 语法：v-model

示例：

双向数据绑定：<input type="text" v-model:value="name">

原理图解：

注意：
（1）改变input框里的值会改变其value值，同时绑定该value值的地方也会一起改变。
（2）双向绑定一般只用在表单类元素上，例如input，select等。
（3）v-model:value=“name” 可以简写为 v-model=“name” ，因为其默认收集的就是value的值。

五、el和data的两种写法

1.el的两种写法

• new Vue的时候配置el:‘#root’
• 先创建Vue实例，然后再通过v.$mount(‘#root’)指定el的值

v.$mount(‘#root’)示例：

const v = new Vue({
      //el: "#root",
      data: {
        name: "尚硅谷",
      },
    });
 v.$mount('#root')

2.data的两种写法

• 对象式：data:{name:‘xxx’}
• 函数式：data:function(){return{name:‘xxx’}}或者data(){return{name:‘xxx’}}

注意： 由Vue管理的函数不能写成箭头函数，一旦写为箭头函数，那么this就不再是Vue实例了。

六、MVVM模型

从代码角度理解：

注意：
（1）data中的所有属性，最后都出现在了vue实例vm身上。
（2）vm身上的所有属性以及Vue原型上的所有属性，在Vue模板中均可以直接使用。

七、Vue数据代理

1.Object.defineproperty方法

• 作用：给某个对象增加某个属性
• 参数：对象、属性名、配置项(value、enumerable、writable、configurable等)

示例：需求：给person对象添加age属性，并通过number进行赋值，同时改变number的值时，age的值也随之改变，代码如下：

let number = 10
let person = {
	name:'张三'
	sex:'男'
}
Object.defineproperty(person,'age',{
	//value:20
	//enumerable:true//控制属性是否可以枚举，默认值是false
	//writable:true//控制属性是否可以被修改，默认值是false
	//configurable:true//控制属性是否可以被删除，默认值是false
	//当有人读取person的age属性时，get函数(getter)会被调用，且返回值是age的值
	get(){
		return number
	}
	//当有人修改person的age属性时，set函数(setter)会被调用，且会收到修改的具体值
	set(value){
		number = value
	}
})

2.数据代理原理

数据代理：通过一个对象代理对另一个对象属性的操作(读/写)

示例：需求，通过对象obj2代理对象obj1中的x属性，代码如下：

let obj1 = {x:100}
let obj2 = {y:1000}
//给obj2添加一个x属性
Object.defineproperty(obj2,'x',{
	//当有人读取obj2的x属性时，get函数(getter)会被调用，此时读取的其实是obj1的x属性。
	get(){
		return obj1.x
	}
	//当有人修改obj2的x属性时，set函数(setter)会被调用，且会收到修改的具体值，此时修改的也是obj1的x属性。
	set(value){
		obj1.x = value
	}
})

读取obj2的x：

修改obj2的x，obj1的x也会改变：

3.Vue数据代理原理图

Vue经过一系列与2.相同的操作实现数据代理。

八、Vue事件处理

1.事件的基本使用

语法：
（1）容器中标签添加v-on:xxx 或者 @xxx 绑定事件，其中xxx是事件名。
（2）Vue实例中添加配置项methods:{yyy},yyy是所定义的方法，方法的语法为：方法名(){}
示例：
a.给按钮绑定事件：

 <button v-on:click="showInfo">点我提示信息</button>

b.给vue实例添加showInfo方法：

new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
      },
      methods:{
            showInfo(){
                alert('你好，同学')
            }
        },
    });

注意：
（1）事件回调（方法）要配置在methods中，且不要用箭头函数。
（2）methods中的函数都是被Vue所管理的，this指向的是vm或组件实例对象。
（3）@click="demo" 与 @click = "demo($event)"效果一致，但后者可以传参。
（4）传参时：若写为@click = "demo(a)"，则传过去的参数是a，但是event对象就丢了，为了保证event不丢，可以写为@click = "demo(a，$event)"，其中$event传的参数是event对象。

2.事件修饰符

• prevent：阻止默认事件（常用）
• stop：阻止事件冒泡（常用）
• once：事件只触发一次（常用）
• capture：使用事件的捕获模式
• self：只有event.target是当前操作的元素才会触发事件
• passive：事件的默认行为为立即执行，无需等待事件回调执行完毕（移动端使用多）

示例：

//通过prevent修饰符阻止a标签默认的点击后跳转事件。
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

//如果不加stop，则点击按钮后会执行一次showInfo，然后冒泡到div，再执行一次showInfo。通过stop修饰符阻止点击按钮后事件冒泡到div。
<div class="demo1" @click="showInfo">
     <button @click.stop="showInfo">点我提示信息</button>
</div>

//通过once修饰符使得点击事件只触发一次。
<button @click.once="showInfo">点我提示信息</button>

//js事件流分为捕获阶段和冒泡阶段，事件处理是冒泡阶段做的。
//捕获阶段是从外向内进行捕获，冒泡阶段是从内向外冒泡。
//以下方代码为例，如果不加capture修饰符，则点击div2，控制台输出的是2,1；如果加了capture修饰符，则点击div2后控制台输出的是1,2。
<div class="box1"  @click="showMsg(1)">       		       
 	div1
  <div class="box2"  @click="showMsg(2)">
       div2
   </div>
</div>

注意： 修饰符可以连续写，例如：先阻止默认事件，再阻止事件冒泡。

<a href="http://www.baidu.com" >@click.prevent.stop="showInfo">点我提示信息</a>

3.键盘事件

（1）@keyup和@keydown
（2）Vue中常用的按键别名：

• enter：回车键
• delete：删除键（del）和退格键（平常用的删除键）
• esc：退出
• space：空格
• tab：换行（必须配合keydown使用）
• up：（方向键）上
• down：（方向键）下
• left：（方向键）左
• right：（方向键）右

示例：

<!--按下回车键后执行showAn方法  -->
<input type="text" placeholder="按下回车键提示输出" @keyup.enter="showAn">

注意：
（1）Vue未提供别名的按键可以用console.log(event.key,event.keyCode)获取按键的名字和编码，然后再使用，例如按下回车键输出如下：

（2）当按键名由多个单词组成时，使用时要把字母都变为小写，并在两个单词中间加“-”，例如：转变大小写键：CapsLock在使用时变为caps-lock，例如：@keyup.caps-lock=“showInfo”。

（3）系统修饰键（用法特殊）：ctrl，alt，shift，meta(win键)

• a.配合keyup使用，按下修饰键的同时，再按下其他键，随后释放其它键，事件才被触发。
• b.配合keydown使用时，正常触发事件。

注意： 如果指定某两键才可以触发事件，例如ctrl+y键才可以触发事件，写法如下：
@keyup.ctrl.y=“showInfo”

（4）也可以使用keycode去指定具体的按键（不推荐，因为该特性已经从web标准中删除了），例如：

<!--按下回车键后执行showAn方法  -->
<input type="text" placeholder="按下回车键提示输出" @keyup.13="showAn">

（5）用“Vue.config.keyCodes.自定义键名 = 键码”，可以定制按键别名。
例如：给回车键定义一个别名“huiche”：

//13是回车键的编码
Vue.config.keyCodes.huiche = 13

九、Vue计算属性

1.调用methods中的方法

示例：

<!-- 调用的时候用插值语法，{{}}中写:函数名() -->
<span>{{name()}}</span>

const vm = new Vue({
      el: "#root",
      data: {
      },
      methods: {
        name(){
          return 'Marry'
        }
      },
    });

2.计算属性

计算属性：通过对已有属性进行加工、计算等操作后得到的属性是计算属性。（例如下方代码中， first_name和last_name是属性，full_name是计算属性）
语法：使用配置项computed（写为对象形式），然后在该配置项内把计算属性也写为对象形式，{}里要写get()和set()。
示例：

<span>{{full_name}}</span>

const vm = new Vue({
      el: "#root",
      data: {
        first_name:"张",
        last_name:"三"
      },
      computed:{
        full_name:{
            get(){
                return this.first_name + '-' + this.last_name
            },
            set(value){
                const arr = value.split('-')
                //this是vm
                this.first_name = arr[0]
                this.last_name = arr[1]
                return 
            }
        }
      }
    });

代码解释：
（1）当读取full_name或者所依赖的数据发生变化时，就会调用get，且返回值作为full_name的值。
（2）当修改full_name时，就会调用set，且返回值作为full_name的值。（如果计算属性要被修改，则必须写set()去响应式修改，且set中要引起计算时依赖的数据发生改变）

注意：
（1）使用计算属性时，由于其内部有缓存机制（复用），只调用一次get()，但是使用methods方法时，没有缓存机制，因此会多次调用对应方法。
（2）data和methods里面写什么，vm里面就是什么，但是computed里面写的内容，在放到vm上的时候，先自动找到get()，然后把返回值放到vm上，名字为对应的计算属性名。
（3）计算属性最终会出现在vm上，直接读取即可。

3.计算属性的简写

简写：省略set()时，可以进行简写。
示例：

full_name:function(){
......
}

full_name(){
......
}

full_name:{
	get(){......}
}

上述三种写法实现效果一样。

十、Vue监视属性

1.watch的第一种配置方式

new Vue时传入watch配置。

示例：
点击按钮实现天气情况切换：

<div id="root">
     <h1>今天天气真{{info}}!</h1>
     <button @click="changeWeather">切换天气</button>
</div>

 const vm = new Vue({
      el: "#root",
      data: {
        isHot:true
      },
      methods: {
        changeWeather(){
            this.isHot = !this.isHot
        }
      },
      computed:{
        info(){
            return this.isHot?"炎热":"凉爽"
        }
      },
      watch:{
        isHot:{
          immediate:true,
          handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
          }
        }
      }  
    });

代码解释：
（1）immediate:true,//初始化时让handler调用一下。
（2）当isHot改变的时候调用handler。
（3）newValue,oldValue分别是修改后的内容和修改前的内容。

效果展示如下：

2.watch的第二种配置方式

通过vm.$watch监视。

示例：

 vm.$watch('isHot',{
      immediate:true,
      handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
          }
    })

3.深度监视

Vue默认可以进行多级监视，但是Vue中的watch默认只监视第一级，不监视对象内部值的改变，但是配置deep:true后就可以监视对象内部值的改变，即进行多级监视。
示例：
要监视data中numbers中a和b的变化：

 data: {
        isHot: true,
        numbers:{
          a:1,
          b:1
        }
      }

'numbers.a':{
        handler(){
          console.log('a的值改变了');
        }
      },
'numbers.b':{
        handler(){
          console.log('a的值改变了');
        }
      }

但是如果numbers内的属性有很多时，就不方便一个个编写了，可以用下面的方法，直接对numbers内的所有属性进行监视。

 watch: {
      numbers:{
        deep:true,
        handler(){
          console.log('numbers的值改变了');
        }
      }
}

4.监视的简写

简写的前提：不需要设置immediate和deep，只有handler时。
（1）正常写法1：

isHot: {
          handler(newValue, oldValue) {
            console.log("isHot被修改了", newValue, oldValue);
          }
 }

简写1（把属性名直接当做handler使用）：

 isHot(newValue,oldValue){
            console.log("isHot被修改了", newValue, oldValue);
 }

（2）正常写法2：

vm.$watch('isHot',{
      handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
      }
})

简写2：

vm.$watch('isHot',function(newValue,oldValue){
      console.log("isHot被修改了", newValue, oldValue);
})

5.监视(watch)与计算属性(computed)对比

computed能完成的功能，watch都能完成，但是watch能完成的功能，computed不一定可以完成，例如：watch可以进行异步操作，而computed不可以。

小原则：
（1）被Vue管理的函数最好写成普通函数，这样this指向是vm或者组件实例对象。
（2）所有不被Vue管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this指向是vm或者组件实例对象。

总结

以上就是打开Vue的新大门的第一页笔记，希望能和对前端感兴趣的友友们一起学习进步，作者也在学习中，如有解释不清楚或有误的地方，还请各位指正。