大前端进阶-09-vue.js-基础

于 2022-01-17 09:02:52 发布
阅读量230 收藏
点赞数
分类专栏： 前端大杂烩 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LC_Liangchao/article/details/122470671
版权

mvvm
vue官网：https://cn.vuejs.org/

例子

cdn引用使用,new Vue对象（必须el绑定要使用的标签）

  • 创建Vue实例: new Vue()来创建Vue实例

  • 构造函数接收一个json配置对象，json配置对象中有一些属性:
    el: 是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
    data: 数据对象，里面可以自定义很多属性，都可以渲染到视图中

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

    <div id="d1">

        { {Message} }
    </div>
    <script>
        var vm = new Vue({
            el: "#d1",
            data: {
                Message: "hello"
            }
        });
    </script>
</body>
</html>

mvvm

是一种软件架构设计模式，核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。

  • M: 即Model，模型，包括数据和一些基本操作

  • V: 即View，视图，页面渲染结果

  • VM: 即View-Model，模型与视图间的双向操作（无需开发人员干涉）

MVVM模式的设计理念;让开发人员从繁琐的DOM操作中解放出来。

语法

Vue的实例-组件（对象）讲解

a. 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 根Root实例 （又称为主组件）开始的:

b. 当创建一个 Vue 实例时，你可以传入一个选项对象, 选项对象包括(例举):

DOM (视图):

  • el: 渲染的html元素

  • template: 渲染的模板(组件开发时用)

数据/方法

  • data: 数据

  • props: 组件属性(组件开发时用)

  • methods: 方法

  • computed: 计算属性

  • watch: 监控属性

生命周期钩子(初始化Vue实例时，不同阶段自动回调的函数)

  • beforeCreate

  • created

  • beforeMount

  • mounted

  • beforeUpdate

  • updated

  • beforeDestory

  • destoryed

定义一个vue组件

进阶

插值表达式 { {} }

作用：取值在页面上显示

语法：{ { vue数据对象中的属性 | 运算表达式 } } ----两种用处，但是如果运算表达式过长，可以用vue的计算属性来代替{ {} }插值表达式里面的运算。
故，{ {} }里面只能是属性和运算表达式，不能由其他的，比如 ：{ {我是总数message} }是不会显示在页面上的，直接当成错误处理了

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <!-- 引入Vue -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- View 视图 -->
    <div id="app">
        { {message} }
        <br/>
        <!-- 插值表达式: 算术运算符 -->
        { {(100 + 100 - 20) * 10 / 20} }
        <br/>
        <!-- 插值表达式: 三目运算符 -->
        { {100 > 50 ? '大于50' : '小于50'} }
    </div>
 
    <!-- Vuejs代码 -->
    <script type="text/javascript">
        // 创建Vue实例
        var vue = new Vue({
            el : '#app', // 指定Vue渲染的html元素 element
            data : { // 数据对象 Model
                message : 'Vuejs入门到精通...'
            }
        });
    </script>
</body>
</html>

v-model

作用：数据（value属性）双向绑定—v-model绑定html元素的value值到data对象，data对象中的属性又可以绑定到html元素的value。

语法：v-model=”数据对象中的属性名” | v-model=”数据对象中的属性名.变量名”-------两种用处

注意：其数据默认是字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs数据绑定</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        姓名：<input type="text" v-model="name"/><br/>
        年龄：<input type="text" v-model="user.age"/><br/>
        性别：<input type="text" v-model="user.sex"/><br/>
        <hr/>
        姓名：{ {name} } 年龄：{ {user.age} } 性别：{ {user.sex} }
    </div>
 
    <script type="text/javascript">
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象(必须先初始化)
                name : '',
                user : {
                    age : '18',  
                    sex : '男'
                }
            }
        });
    </script>
</body>
</html>

例二：

例三：

v-bind

作用：属性（除了value属性外的其他属性）单向绑定----v-bind绑定html元素的属性值，只能从data对象中取属性绑定到html元素的属性值。（vue的data到html）

语法：v-bind:html元素的属性值=”数据对象中的属性名”（使用这个方法，idea会报红，但不是错）

简写： :html元素的属性值=”数据对象中的属性名”

vue的data数据对象中属性 指向的是html样式中的值

注意：
v-bind：能转换类型，如下：
：page-index=“1” 会把字符串1转换成数值类型
:bottom=“true” 加：才会认为是布尔类型，而不是字符串类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs属性绑定</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-bind: 绑定html元素的属性值 -->
        <font v-bind:color="color" v-bind:size="size22">李大华</font>
 
        <hr/>
        <!-- 简写: html元素的属性值 -->
        <font :color="color" :size="size22">李大华</font>
 
        <hr/>
        <!-- 拼接多个颜色值 -->
        <font :color="color1 + color2" :size="size22">李大华</font>
 
        <!-- url带参数值 -->
        <a v-bind:href="'http://www.baidu.com?id='+ id">百度</a>
        <a :href="'http://www.baidu.com?id='+ id">百度</a>
    </div>
 
    <script type="text/javascript">
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象(必须先初始化)
                color : 'red',
                color1 : 'yellow',
                color2 : 'green',
                size22: 5,      //注意这儿不加px
                id : 100
            }
        });
    </script>
</body>
</html>

v-on

作用：为html元素绑定事件

语法: @html元素的事件名把前面的on去掉-------------@click=”函数名()”

这个函数名()必须卸载vue的method中

常用事件指令:

@click：单击事件

@blur：失去焦点事件

@keyup：键盘按键按下并松开

@focus：获取焦点事件

@change：对应onchange改变事件

@keydown：键盘按键按下事件

@keypress：同上

@mousedown：鼠标按下事件

@mouseup：鼠标按下弹起

@mouseenter：鼠标进入事件

@mouseleave：鼠标离开事件

@mouseover：鼠标进入事件

注意：v-model.number=”x”绑定数据时指定x变量的数据类型。(v-model默认都是字符串类型)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs事件绑定</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-model.number : 指定x变量的数据类型 -->
        x值：<input type="text" v-model.number="x" @keyup="keyup()"/><br/>
        y值：<input type="text" v-model.number="y" @blur="blur()"/><br/>
        <input type="button" @click="calc()" value="计算一"/>
        <!--
           @事件名 这种方式绑定事件在Vue2.0推荐使用
           过时的事件绑定(了解 1.x版本)
           v-on:事件名 已放弃
         -->
        <input type="button" v-on:click="calc()" value="计算二"/>
        <hr/>
        { {count} }
    </div>
    <script type="text/javascript">
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象(必须先定义，才能使用)
                x : '',
                y : '',
                count : ''
            },
            methods : { // 事件方法
                calc() {
                    this.count = this.x + this.y;
                },
                keyup() {
                    alert(this.x);
                },
                blur() {
                    alert(this.y);
                }
            }
        });
    </script>
</body>
</html>

##按键修饰符

作用：可监控用户具体按了哪个键

语法: @html元素事件名把前面的on去掉.按键修饰符=”函数名()”---------------------@keyup.enter=”fun1()”

ue.js允许在绑定事件时可以指定具体的按键事件，按键别名:

.enter (回车键)

.tab (Tab键)

.delete (捕获 “删除” 和 “退格” 键)

.esc (Esc键)

.space (Space键)

.up (向上键)

.down (向下键)

.left (向左键)

.right (向右键)

.ctrl (Ctrl键)

.alt (Alt键)

.shift (Shift键)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs按键修饰符</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 判断按下了什么键才触发事件：
             @keydown.enter: 按下了回车键
             $event: Vue事件对象它封装了(dom的event对象)。
         -->
        姓名：<input type="text" @keydown.enter="fun1($event)"/>
    </div>
 
    <script type="text/javascript">
        var vue = new Vue({
            el : '#app',
            methods : {
                fun1 (e) {
                    alert('按下了回车键！' + e.keyCode);
                }
            }
        });
    </script>
</body>
</html>

$event.keyCode: 获取按键代号。

问题：通过Vue怎样为文本框绑定回车键?

回答：

@keyDown.13—方1
@keyDown.enter----方2

v-for

作用：迭代vue的data数据对象中的 数组 或者 json对象 在页面显示，故用在视图上

语法:

迭代数组[]： v-for=“item in 数组” 或 v-for="(item,index) in 数组"

迭代对象{}： v-for="(value,key) in 对象"
注意，前面是值后面那是键

迭代对象数组[{},{},{}]: v-for=“item in 对象数组” 或 v-for=”(item,index) in 对象数组”

应用场景:

  • <li v-for=’"">
或者 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs迭代指令</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">

        <ul>
            <!-- 迭代数组 -->
            <li v-for="(item,index) in dataList">
                索引号：{ {index} } === 数组元素：{ {item} }
            </li>
        </ul>

        <ul>
            <!-- 迭代对象 -->
            <li v-for="(value, key) in user">
                { {key} } : { {value} }
            </li>
        </ul>
        

        <table border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <!-- 迭代对象数组 -->
            <tr v-for="(item,index) in arrUsers">
                <td>{ {index+1} }</td>
                <td>{ {item.name} }</td>
                <td>男</td>
                <td>{ {item.age} }</td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
      // 创建Vue实例
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
                dataList : [100,200,300,400,500],
                user : {name : '李小一', age : 19, sex : '男'},
                arrUsers : [
                  {name:'lisa1' , age: 11},
                  {name:'lisa2' , age: 13},
                  {name:'lisa3' , age: 15}
              ]
            }
        });
    </script>
</body>
</html>

v-text / v-html

v-text: 为html元素添加text相当于innerText (原样输出)

语法: <html标签名 v-text=”数据对象中的属性名”></html标签名>

v-html: 为html元素添加html相当于innerHTML (格式化输出)

语法: <html标签名 v-html=”数据对象中的属性名”></html标签名>

这儿的html元素，一般都是指容器或者修饰字体元素。

v-text与v-html指令的区别?

v-text: 输出普通的文件，如果有html文本的话，会原样输出
v-html: 输出普通的文件，如果有html文本的话，会格式化输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs文本指令</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-text="message"></div>
        <div v-html="message"></div>
    </div>
 
    <script type="text/javascript">
        var vue = new Vue({
            el : '#app',
            data : {
                message : '<h1>中国人</h1>'
            }
        });
    </script>
</body>
</html>

v-if & v-show

v-if: 控制html元素是 显示还是隐藏(true:显示、false:隐藏)

语法：<html标签名 v-if=”true|false”></html标签名>

v-show: 控制html元素是 显示还是隐藏(true:显示、false:隐藏)

语法：<html标签名 v-show=”true|false”></html标签名>

****v-if与v-show的区别?

v-if: 显示(添加html元素) 隐藏(删除html元素)
v-show: 显示(把dispaly:none删除) 隐藏(style=“dispaly:none”)

***应用场景:就是隐藏html元素，因为默认是显示的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs显示与隐藏</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="flag">我可是最牛div层一</div>
        <div v-show="flag">我可是最牛div层二</div>
        <input type="button" @click="toggle()" value="开关"/>
    </div>
 
    <script type="text/javascript">
        var vue = new Vue({
            el : '#app',
            data : {
                flag : true
            },
            methods : {
                toggle : function () {
                    this.flag = !this.flag;
                }
            }
        });
    </script>
</body>
</html>

条件指令

注意：v-else和v-else-if是不能脱离v-if单独使用的

  • v-if: 条件成立输出该html标签中的内容。

  • v-else-if: 如果v-if条件不成立，才会判断该条件，如果条件成立输出该html标签中的内容。

  • v-else: 如果v-if或v-else-if条件不成立，输出该html标签中的内容。

扩展：在js中=，==，===的区别

=是赋值运算符，==是关系运算符; ===是全等运算符。

””与”=”是不同的,一个是判断值是否相等,一个是判断值及类型是否完全相等。第一个是相等符；第二个全等符；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs条件指令</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 1. v-if / v-else-if / v-else -->
        <div>
            <span v-if="sex == 1">男</span>
            <span v-else-if="sex == 0">女</span>
            <span v-else>保密</span>
        </div>
        <!-- 2. v-if / v-else-if -->
        <div>
            <span v-if="sex == 1">男</span>
            <span v-else-if="sex == 0">女</span>
        </div>
        <!-- 3. v-if / v-else -->
        <div>
            <span v-if="sex == 1">男</span>
            <span v-else>保密</span>
        </div>
    </div>
 
    <script type="text/javascript">
       var vue = new Vue({
           el : '#app', // 渲染的html元素
           data : { // 数据对象
                sex : 0 // 性别
           }
       });
    </script>
</body>
</html>

vue的 computed 计算属性

作用：简化插值运算符{ {} }里面的运算表达式

语法; 有两种， 但是无论哪一种，都不是代表函数，都是一个属性

注意：他的本质使用和缓存，吧结果缓存起来，只有data里面拿到数据放生了变化才会更新缓存

computed: {
   key1: function(){
        return "计算后的数据";
    },
 
    key2(){
        return "计算后的数据";
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs计算属性</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        <h2>{ {new Date(milliseconds).getFullYear() + "年"
                + new Date(milliseconds).getMonth()
                + "月" + new Date(milliseconds).getDate()} }</h2>
        <!-- 计算属性 (注意：它不是一个函数) -->
        <h2>{ {time} }</h2>
    </div>
 
    <script type="text/javascript">
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
                milliseconds : 1573878276849,
            },
            computed : { // 计算属性
                time (){ // time属性
                    const date = new Date(this.milliseconds);
                    return date.getFullYear() + "年" + date.getMonth() + "月" + date.getDate();
                }
            }
        });
    </script>
</body>
</html>

计算属性需要我们自己主动调用，生命周期钩子函数不会主动调用计算属性。

计算属性本质是函数，但是一定要返回数据。页面渲染时，只能把这个函数当成一个属性来使用。

vue的 watch 监控属性

作用：监控data（数据对象）中属性值发生改变

前提：页面要用了v-modle来修饰

语法： 有两种，这是对于当v-model指定的是一个vue中data的属性名 或者 vue中data的属性名.变量名

watch : {
    key1 : function(newVal, oldVal){     // vue中data的属性名
         
    },　　　　//"obj.key1" 是vue中data中的对象属性以及其键



"obj.key1" : function(newVal, oldVal){ //vue中data的属性名.变量名 } <br><br>　　}

使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs监控属性</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message"/><br/>
        <h2>{ {message} }</h2>
 
        <input type="text" v-model="user.name"/><br/>
        <input type="text" v-model="user.age"/><br/>
        <h2>
            姓名: { {user.name} } ==> 年龄: { {user.age} }
        </h2>
    </div>
 
    <script type="text/javascript">
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
                message : '',
                user : {name : '', age : ''}
            },
            watch : { // 监控属性
                message : function(newVal, oldVal){
                    console.log("新值:" + newVal + ",旧值:" + oldVal);
                },
                "user.name" : function(newVal, oldVal){
                    console.log("user.name:" + newVal + ",user.name:" + oldVal);
                }
            }
        });
    </script>
</body>
</html>

扩展：

  • 了解Vuejs的生命周期
    每个 Vue 实例在被创建时都要经过一系列的初始化过程: 创建实例，装载模板，渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

  • vue实例的执行步骤：

问题

问题1：页面初始化数据，可以在哪些钩子函数中提前加载?-----------------created | beforeMount

问题2:data数据对象发生改变，可以在哪些钩子函数中监听?----------------beforeUpdate updated

LC超人在良家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LC超人在良家

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值