（一）vue重学之入门启航

站长

2022年12月11日 00:12 · 阅读数 19

开发者：尤雨溪

Vue 是一套用于 构建用户界面的渐进式 JavaScript框架

特点

采用组件化模式，提高代码复用率、且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

第一个vue实例

<!-- 准备一个容器 -->  
<div id='root'>{{msg}}</div>  
<!-- 引入Vue依赖 -->  
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  
<script>  
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示   
    // 创建vue实例  
    var vm = new Vue({  
        el:'#root',//绑定元素  
        data:{ //为模板提供数据  
            msg:'hello Vue!',  
        },  
    });  
</script>

想要Vue工作，必须创建一个Vue实例，并且传入一个配置对象
root容器中的代码必须符合html规范，可以混入特殊Vue语法
root容器中的代码被称为【Vue模板】

注意：📢

一个容器只能被一个Vue实例匹配

{{}}中必须是JS表达式(会产生一个值)，且会自动读取到data中的所有属性

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

绑定元素与data的两种写法

绑定元素

在new Vue创建实例对象时，配置对象的el属性
在创建实例对象后，通过vm.$mount('#root')挂载

data两种写法

对象式data
函数式data(常用)

注意📢

组件学习时data必须使用函数式，否则报错

函数式data的this指向为当前vue实例对象

函数式data不能使用箭头函数形式（箭头函数没有this指向）

//创建vue实例  
var vm = new Vue({  
    //el:'#root',//绑定元素(第一种写法)  
    //data第一种对象式写法  
    // data:{ //为模板提供数据  
    // msg:'hello Vue!',  
    // },  
    //data第二种函数式写法(必须有返回值，且不能是箭头函数)  
    data() {  
        return {  
            msg:'hello Vue!'  
        }  
    },  
}).$mount("#root")//绑定元素第二种写法

模板语法

Vue模板语法有2大类：【插值、指令】

<!-- 准备一个容器 -->  
<div id='root'>  
    <h1>插值语法：</h1>  
    <h3>{{msg}}</h3>  
  
    <h1>指令语法：</h1>  
    <!-- v-bind指令 -->  
    <a v-bind:href="url">点我去百度</a>  
    <!-- v-bind指令简写 -->  
    <a :href="url2">点我去新浪</a>  
</div>  
  
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>  
<script>  
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示  
    //创建vue实例  
    var vm = new Vue({  
        el:'#root',//绑定元素  
        data:{ //为模板提供数据  
            msg:'hello Vue!',  
            url:'https://www.baidu.com',  
            url2:'https://www.sina.com.cn'  
        },  
    });  
</script>

插值语法

功能：用于解析标签体内容
语法：{{xxx}}，xxx是js表达式且可以读取到data中的所有属性

指令语法

功能：用于解析标签（标签属性、标签体内容、绑定时间....）
语法：v-bind:href="xxx"或:href="xxx",xxx同样为js表达式且可以读取到data中的所有属性

数据绑定

Vue中有2种数据绑定方式：【v-bind、v-model】

<div id='root'>  
    <!-- 单向数据绑定v-bind -->  
    <input type="text" v-bind:value="name"> 
    <!-- v-bind简写 -->  
    <input type="text" :value="name">  
      
    <!-- 双向数据绑定v-model -->  
    <input type="text" v-model:value="name">  
      
    <!-- v-model简写 -->  
    <input type="text" v-model="name">  
</div>

单向绑定（v-bind）:数据只能从data流向页面
双向绑定（v-model）:数据不仅能从data流向页面，还可以从页面流向data

注意📢

双向绑定一般应用在输入类表单上

v-model:value可简写为v-model(v-model默认收集value值)

在使用v-model收集表单数据时有以下几种情况：

对于输入框的表单组件，v-model收集的就是value值
对于radio单选框，需要给其input配置value值
对于checkbox复选框：
- 若没有配置value属性v-model收集的就是checked（布尔值）
- 若配置了value属性但初始值为非数组，收集的也是checked（布尔值）
- 若配置了value属性且初始值为数组，则收集的就是value值组成的数组

另外还有修饰符供v-model使用：

lazy：失去焦点才获取到输入的数据
number：输入字符串转为有效数字
trim：输入数据清除首尾空格

<!-- trim -->  
账号: <input type="text" v-model.trim="account">  
<!-- number -->  
密码: <input type="password" v-model.number="password">  
<!-- lazy -->  
<textarea v-model.lazy="other"></textarea>