Vue2 基础语法

Vue2 基础语法

了解更多详情请访问 https://cn.vuejs.org/v2/guide/index.html

视频教程 https://www.bilibili.com/video/BV1Zy4y1K7SH

一、Vue 安装

官方手册给出了多种安装方式，这里列出两种

CDN

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<!-- 生产环境版本，优化了尺寸和速度 --> 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

NPM

npm install vue

二、初识Vue

学习阶段，推荐使用第一种，不过，我们直接使用下载版本就好，防止断网；

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3.root容器里的代码被称为【Vue模板】；

4.Vue实例和容器是一一对应的；

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；

6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

<div id="app">
    {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    const app = new Vue({
        el : '#app',
        data : {
            message : 'Hello, Vue!'
        }
    });
</script>

三、模板语法

Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…..）。
举例：v-bind:href="xxx"或 简写为 :href="xxx"，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处只是拿v-bind举个例子。

<div id="root">
    <h1>插值语法</h1>
    <h3>你好 {{name}}</h3>
    <hr/>
    <h1>指令语法</h1>
    <a v-bind:href="school.url" x="hello">点我去{{school.name}}学习1</a>
    <a :href="school.url">点我去{{school.name}}学习2</a>
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            school:{
                name:'百度',
                url:'http://www.baidu.com',
            }
        }
    })
</script>

四、数据绑定

Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<div id="root">
    <!-- 普通写法 -->
    <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="name"><br/> -->
    <!-- 简写 -->
    单项数据绑定：<input type="text" :value="name"><br/>
    双向数据绑定：<input type="text" v-model="name"><br/>
    <!-- 如下代码是错误的，因为v-model只能应用再表单类元素（输入类元素）上 -->
    <!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#root',
        data:{
            name:'张三'
        }
    })
</script>

五、el和datad的两种写法

data与el的2种写法：
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

<div id="root">
    <h1>你好，{{name}}</h1>
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    //el的两种写法
    // const vm = new Vue({
    //     el:'#root',//第一种写法
    //     data:{
    //         name:'zhangsan'
    //     }
    // })
    // console.log(vm)
    // vm.$mount("#root")//第二种写法
    new Vue({
        el:'#root',
        //data的第一种写法，对象式
        // data:{
        //     name:'zhangsan'
        // }
        //data的第二种写法，函数式
        data(){
            console.log('@@@',this)//此处的this是Vue实例对象
            return{
                name:'zhangsan'
            }
        }
    })
</script>

六、事件处理器

1、事件的基本使用

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- <button v-on:click="showInfo">点我提示信息</button> -->
    <button @click="showInfo1">点我提示信息1(不传参)</button>
    <button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#root',
        data:{
            name:'中国',
        }, 
        methods:{
            showInfo1(event){
                console.log(event.target.innerText)
                console.log(this)//此处的this是vm
                alert('你好！')
            },
            showInfo2(event,number){
                console.log(event , number)
                console.log(event.target.innerText)
                console.log(this)
                alert('你好')
            }
        }
    })
</script>

2、事件修饰符

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

<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- 阻止默认事件（常用） -->
    <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    <!-- 阻止事件冒泡（常用） -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
        <!-- 修饰符可以连续写 -->
        <!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo"></a> -->
    </div>
    <!-- 事件只触发一次（常用） -->
    <button @click.once="showInfo">点我提示信息</button>
    <!-- 使用事件的捕获模式 -->
    <div class="box1" @click.capture="showMag(1)">
        div
        <div class="box2" @click="showMag(2)">
            div2
        </div>
    </div>
    <!-- 只有event.target是当前操作的元素时才触发事件； -->
    <div class=""></div>
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#root',
        data:{
            name:'中国'
        },
        methods:{
            showInfo(e){
                alert('同学你好！')
                console.log(e.target)
            },
            showMag(msg){
                console.log(msg)
            }
        }
    })
</script>

2、键盘事件

1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- <input type="text" placeholder="按下回车提示输入" @keyup="showInfo"> -->
    <!-- <input type="text" placeholder="按下回车提示输入" @keydown="showInfo"> -->
    <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
    new Vue({
        el:'#root',
        data:{
            name:'中国'
        },
        methods: {
            showInfo(e){
                // console.log(e.key,e.keyCode)
                console.log(e.target.value)
            }
        },
    })
</script>

七、计算属性

计算属性关键词: computed

1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<div id="root">
    姓：<input type="text" v-model="firstName"><br/><br/>
    名：<input type="text" v-model="lastName"><br/><br/>
    全名：<span>{{fullName}}</span>
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:"#root",
        data:{
            firstName:"张",
            lastName:"三",
        },
        computed:{
            //完整写法（原理）
            // fullName:{
            //     get(){
            //         console.log('get被调用了')
            //         return this.firstName + '-' + this.lastName
            //     },
            //     set(value){
            //         console.log('set' , value)
            //         const arr = value.split('-')
            //         this.firstName = arr[0]
            //         this.lastName = arr[1]
            //     }
            // }
            //简写
            fullName(){
                console.log('get被调用了')
                return this.firstName + '-' + this.lastName                }
        }
    })
</script>

八、监视属性

监视属性关键字：watch
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changWeaher">切换天气</button>
    <hr/>
    <h3>a的值是:{{numbers.a}}</h3>
    <button @click="numbers.a++">点我让a+1</button>
    <h3>b的值是：{{numbers.b}}</h3>
    <button @click="numbers.b++">点我让b+1</button>
    <h3>e的值是：{{numbers.c.d.e}}</h3>
    <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
            numbers:{
                a:1,
                b:1,
                c:{
                    d:{
                        e:100
                    }
                }
            }
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changWeaher(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            isHot:{
                // immediate:true, //初始化时让handler调用一下
                // handler什么时候调用？当isHot发生改变时。
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            },
            //简写
            // isHot(newValue,oldValue){
            //     console.log('isHot被修改了',newValue,oldValue,this)
            // },
            //监视多级结构某个属性的变化
            // 'numbers.a':{
            //     handler(){
            //         console.log('a被修改了')
            //     }
            // }
            numbers:{
                // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
                deep:true,
                handler(){
                    console.log('numbers改变了')
                }
            }
        }
    })
    // 第二种写法
    // vm.$watch('isHot',{
    //     immediate:true,//初始化时让handler调用一下
    //     deep:true,//深度监视
    //     handler(newValue,oldValue){
    //         console.log('isHot被修改了',newValue,oldValue)
    //     }
    // })
    //简写
    // vm.$watch('isHot',(newValue,oldValue)=>{
    //     console.log('isHot被修改了',newValue,oldValue,this)
    // })
</script>

九、computed和watch之间的区别

1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。

<div id="root">
    姓：<input type="text" v-model="firstName"><br><br>
    名：<input type="text" v-model="lastName"><br><br>
    全名：<span>{{fullName}}</span>
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
            fullName:'张-三'
        },
        watch:{ 
            firstName(val){
                setTimeout(() => {
                    console.log(this)
                    this.fullName = val + "-" + this.lastName
                }, 1000);
            },
            lastName(val){
                this.fullName = this.firstName + '-' + val
            }
        }
    })
</script>

十、绑定样式

1. class样式
   写法:class="xxx" xxx可以是字符串、对象、数组。
   字符串写法适用于：类名不确定，要动态获取。
   对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
   数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式
   :style="{fontSize: xxx}"其中xxx是动态值。
   :style="[a,b]"其中a、b是样式对象。

<div id="root">
    <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><br>
    <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
    <div class="basic" :class="classArr">{{name}}</div><br><br>
    <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
    <div class="basic" :class="classObj">{{name}}</div><br><br>
    <!-- 绑定style样式--数组写法 -->
    <div class="basic" :style="styleArr">{{name}}</div><br><br>
    <!-- 绑定style样式--对象写法 -->
    <div class="basic" :style="styleObj">{{name}}</div><br><br>
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#root',
        data:{
            name:'中国',
            mood:'normal',
            classArr:['atguigu1','atguigu2','atguigu3'],
            classObj:{
                atguigu1:true,
                atguigu2:false,
            },
            styleArr:[
                {
                    fontSize:'40px',
                    color:'blue',
                },
                {
                    backgroundColor:'gray'
                }
            ],
            styleObj:{
                fontSize:'40px',
                color:'red',
            },
            styleObj2:{
                backgroundColor:'orange'
            }
        },
        methods: {
            changeMood(){
                const arr = ['happy' , 'sad' , 'normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
    })
</script>

十一、条件渲染

1.v-if
写法：
(1).v-if=”表达式”
(2).v-else-if=”表达式”
(3).v-else=”表达式”
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show
写法：v-show=”表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<div id="root">
    <h2>当前的n值是:{{n}}</h2>
    <button @click="n++">点我n+1</button>
    <!-- 使用v-show做条件渲染 -->
    <h2 v-show="false">欢迎来到{{address}}</h2>
    <h2 v-show="1 === 1">欢迎来到{{address}}</h2>
    <!-- 使用v-if做条件渲染 -->
    <h2 v-if="false">欢迎来到{{address}}</h2>
    <h2 v-if="1 === 1">欢迎来到{{address}}</h2>
    <!-- v-else和v-else-if -->
    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else-if="n === 3">Vue</div>
    <div v-else>哈哈</div>
    <!-- v-if与template的配合使用 -->
    <template v-if="n === 1">
        <h2>你好</h2>
        <h2>中国</h2>
        <h2>北京</h2>
    </template>
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#root',
        data:{
            address:'中国',
            n:0
        },
    })
</script>

十二、列表渲染

v-for指令:
1.用于展示列表数据
2.语法：v-for="(item, index) in xxx" :key="yyy"
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<div id="root">
    <!-- 便利数组 -->
    <h2>人员列表（便利数组）</h2>
    <ul>
        <li v-for="(p,index) of persons" :key="index">
            {{p.name}}-{{p.age}}
        </li>
    </ul>
    <!-- 遍历对象 -->
    <h2>汽车信息（遍历对象）</h2>
    <ul>
        <li v-for="(value,k) of car" :key="k">
            {{k}}-{{value}}
        </li>
    </ul>
    <!-- 遍历字符串 -->
    <h2>测试遍历字符串(用的少)</h2>
    <ul>
        <li v-for="(char,index) of str" :key="index">
            {{char}}-{{index}}
        </li>
    </ul>
    <!-- 遍历指定次数 -->
    <h2>测试遍历指定次数（用的少）</h2>
    <ul>
        <li v-for="(number,index) of 5" :key="index">
            {{index}}-{{number}}
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001', name:'张三', age:18},
                {id:'002', name:'李四', age:19},
                {id:'003', name:'王五', age:20}
            ],
            car:{
                name:'奥迪',
                price:'70万',
                color:'黑色'
            },
            str:'hello'
        },
    })
</script>

十三、表单

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

<div id="root">
    <form action="" @submit.prevent="demo">
        账号：<input type="text" v-model.trim="userInfo.account"><br>
        密码：<input type="password" v-model="userInfo.password"><br>
        年龄：<input type="number" v-model.number="userInfo.age"><br>
        性别：
        男：<input type="radio" name="sex" value="1" v-model="userInfo.sex">
        女：<input type="radio" name="sex" value="0" v-model="userInfo.sex">
        <br><br>
        爱好：
        学习：<input type="checkbox" value="1" v-model="userInfo.hobby">
        打游戏：<input type="checkbox" value="2" v-model="userInfo.hobby">
        吃饭：<input type="checkbox" value="3" v-model="userInfo.hobby">
        <br><br>
        所属地区
        <select name="" id="" v-model="userInfo.city">
            <option value="">请选择地区</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="4">深圳</option>
        </select>
        <br><br>
        其他信息：
        <textarea name="" id="" cols="30" rows="10" v-model.lazy="userInfo.other"></textarea>
        <br><br>
        <input type="checkbox" v-model="userInfo.agree"><a href="#">阅读并接受</a>
        <button>提交</button>
    </form>
</div>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#root',
        data:{
            userInfo:{
                account:'',
                password:'',
                age:18,
                sex:'0',
                hobby:[],
                city:'1',
                other:'',
                agree:''
            }
        },
        methods: {
            demo(){
                console.log(JSON.stringify(this.userInfo))
            }
        },
    })
</script>