VueJS的学习{{}}和v-once和v-html和v-bind，v-model，v-on,methods,computed

最新推荐文章于 2024-07-20 18:05:54 发布

捡黄金的少年

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量407

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_43288858/article/details/104947243

Vue.js 介绍

Vue 是什么
主流的渐进式 JavaScript 框架
什么是渐近式
可以和传统的网站开发架构融合在一起，例如可以简单的把它当作一个类似 JQuery 库来使用。
也可以使用Vue全家桶框架来开发大型的单页面应用程序。
使用它的原因
vue.js 体积小，编码简洁优雅，运行效率高，用户体验好.
无Dom操作，它能提高网站应用程序的开发效率
什么场景下使用它
一般是需要开发单页面应用程序（Single Page Application, 简称:SPA）的时候去用
单页面应用程序，如：网易云音乐 https://music.163.com/
因为 Vue 是渐进式的，Vue 其实可以融入到不同的项目中，即插即用

Vue学习资源

中文官网（中文文档很友好）：https://cn.vuejs.org/
官方教程：https://cn.vuejs.org/v2/guide/
GitHub：https://github.com/yyx990803
API文档：https://cn.vuejs.org/v2/api/

发展历史

作者：尤雨溪（微博：尤小右），一位华裔前 Google 工程师，江苏无锡人。
个人博客：http://www.evanyou.me/
新浪微博：http://weibo.com/arttechdesign
知乎：https://www.zhihu.com/people/evanyou/activities
2013年12月8号在 GitHub 上发布了 0.6 版
2015年10月份正式发布了 1.0 版本，开始真正的火起来
2016年10月份正式发布了 2.0 版
2019.4.8号发布了 Vue 2.5.10 版本 https://github.com/vuejs/vue/releases
1.x 版本老项目可能还在用，新项目绝对都是选择 2.x

对比其他前端 JS 框架

Angular
2009 年诞生的，起源于个人开发，后来被 Google 收购了。
核心技术：模板和数据绑定技术，体验越来越差，走下坡路了。
React
2013年5月开源的，起源于 Facebook 的内部项目，对市场上所有 JS 框架都不满意，于是自已写了一套。
核心技术：组件化和虚拟DOM 技术。
Vue.js
吸收了上面两个框架的技术优点。
使用情况：
BAT 级别的企业：React 最多 > Angular > Vue.js
中小型公司：Vue.js 更多一些，有中文文档学习成本低。
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟 ECMAScript 5 特性。推荐使用最新谷歌浏览器。

Vue 核心技术

在 vue-01-core 目录下新建一个页面 01-helloworld.html
在 vue-01-core 目录下的命令行窗口，安装2.6.10版本的 vue 模块

npm install vue@2.6.10

编写第一个HTML页面

编写步骤：

采用 <script 标签引入 vue.js 库
定义一个
new Vue() 实例化Vue应用程序
el 选项：元素element的缩写，指定被 Vue 管理的 Dom 节点入口（值为选择器 )，必须是一个普通的
HTML 标签节点，一般是 div。
data 选项：指定初始化数据，在 Vue 所管理的 Dom 节点下，可通过模板语法来进行使用
标签体显示数据： {{xxxxx}}
表单元素双向数据绑定： v-model
注意： el 的值不能为 html 或 body

<body>
    <div id="app">
        <p>Hello, {{ msg }}</p>
        <input type="text" v-model="msg">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app', // el选项的值不能指定html或 body
            data: {
                msg: 'Vue.js'
           }
       })
    </script>
</body>

源码实现：
在这里插入图片描述

分析 MVVM 模型

常见面试题：什么是 MVVM 模型？

MVVM 是 Model-View-ViewModel 的缩写，它是一种软件架构风格
Model：模型，数据对象（data选项当中的）
View：视图，模板页面（用于渲染数据）
ViewModel：视图模型，其实本质上就是 Vue 实例

它的哲学思想是：
通过数据驱动视图
把需要改变视图的数据初始化到 Vue中，然后再通过修改 Vue 中的数据，从而实现对视图的更新。
声明式编程
按照 Vue 的特定语法进行声明开发，就可以实现对应功能，不需要我们直接操作Dom元素
命令式编程：Jquery它就是，需要手动去操作Dom才能实现对应功能。

在谷歌浏览器安装Vue Devtools 插件

Vue Devtools 插件让我们在一个更友好的界面中审查和调试 Vue 项目。
谷歌浏览器访问： chrome://extensions ，然后右上角打开开发者模式，打开的效果如下，
在这里插入图片描述
安装成功效果如下：

模板数据绑定渲染

可生成动态的HTML页面，页面中使用嵌入 Vue.js 语法可动态生成
{{xxxx}} 双大括号文本绑定
v-xxxx 以 v- 开头用于标签属性绑定，称为指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- {{JS表达式}} -->
    <div id="app">
<h3>1{{}}双大括号输出的文本内容</h3>
<!-- 文本内容 -->
<p>{{message}}</p>
<!-- Js 表达式 -->
<p>{{score+1}}</p>
    </div>
    <!-- 使用VUe.js控制台有提示，使用Vue.min.js生产环境，控制台没有提示 -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
     var vm=new Vue({
        el:'#app',
        data:{
        message:'jianghapojie',
        score:100
        }
     })
    </script>
</body>
</html>

但是上面的代码页面改变值

一次性插值 v-once

2、一次性插值 v-once

这个将不会改变: {{ message }}

在这里插入图片描述
3 v-html的用法
注意：data{}里面的Json表达式都是用的是单引号，不是双引号，HTML中的转义字符为\左斜杠
作用：
如果是HTML格式数据，双大括号会将数据解释为普通文本，为了输出真正的 HTML，你需要使用 vhtml
指令。
Vue 为了防止 XSS 攻击，在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息），读
取到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。
XSS 攻击还可以在你进入到支付时，跳转到钓鱼网站。
在这里插入图片描述

v-html防XSS攻击举例

在contentHtml中加入

在这里插入图片描述

元素绑定指令 v-bind

完整格式： v-bind:元素的属性名=‘xxxx’
缩写格式： :元素的属性名=‘xxxx’
作用：将数据动态绑定到指定的元素上

<p>元素绑定</p>
<img v-bind:src="imgUrl" alt="">

<img :src="imgUrl" alt="">
    </div>
    <!-- 使用VUe.js控制台有提示，使用Vue.min.js生产环境，控制台没有提示 -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
     var vm=new Vue({
        el:'#app',
        data:{
        message:'jianghapojie',
        score:100,
        contentHtml:'<span style="color: red;">这个是红色的v-html解析的文字<script>alert("js代码防XSS攻击")<\/script> </span>',
        imgUrl:'https://n.sinaimg.cn/sinakd2020318s/748/w500h248/20200318/d4e1-iqyryku8886194.jpg'
        }



     })
    </script>

在这里插入图片描述

事件绑定指令 v-on

完整格式： v-on:事件名称=“事件处理函数名”
缩写格式： @事件名称=“事件处理函数名” 注意： @ 后面没有冒号
作用：用于监听 DOM 事件
案例源码：每点击1次，数据就加1
v-model>value
在data里面初始化数据num
在method方法里面写方法且用this.num调用data里面的num

<p>事件绑定指令v-on</p>
<input type="text"  value="1" v-model="num">
<button v-on:click="add">点击加1</button>
<button @click="add">点击加1</button>
    </div>
    <!-- 使用VUe.js控制台有提示，使用Vue.min.js生产环境，控制台没有提示 -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
     var vm=new Vue({
        el:'#app',
        data:{
        message:'jianghapojie',
        score:100,
        contentHtml:'<span style="color: red;">这个是红色的v-html解析的文字<script>alert("js代码防XSS攻击")<\/script> </span>',
        imgUrl:'https://n.sinaimg.cn/sinakd2020318s/748/w500h248/20200318/d4e1-iqyryku8886194.jpg',
        baidu:"https://www.baidu.com",
        num:10,
    },
methods: {
    add:function(){
        console.log('add被调用啦')
        this.num++
    }
}
     })
    </script>

在这里插入图片描述

计算属性 computed

computed 选项定义计算属性
计算属性类似于 methods 选项中定义的函数
计算属性会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。
函数每次都会执行函数体进行计算。
需求：输入数学与英语分数，采用 methods 与 computed 分别计算出总得分
案例源码：
先用method方法计算,数据采用v-model绑定

<div id="app">

        數學<input type="text" v-model="shuxue">
        英語<input type="text" v-model="english">
        总分<input type="text" v-model="allnum()">
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
var vm=new Vue({
    el:'#app',
    data:{
        shuxue:120,
        english:110

    },
    methods: {
        allnum:function(){
            var allnu=this.shuxue+this.english;
            return allnu
        }
    }
})

computed计算属性
computed 选项内的计算属性默认是 getter 函数，所以上面只支持单向绑定，当修改数学和英语的数据才会
更新总分，而修改总分不会更新数据和英语

<body>
    <div id="app">
       数学：<input type="text" v-model="mathScore" >
       英语：<input type="text" v-model="englishScore">
       总分(方法-单向)：<input type="text" v-model="sumScore()">
       总分(计算属性-单向)：<input type="text" v-model="sumScore1">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                mathScore: 80,
                englishScore: 90,
           },
            methods: { //不要少了s
                sumScore: function () {
                    //在控制台输入 vm.sumScore() 每次都会被调用
                    console.info('sumScore被调用')
                    // `this` 指向当前 vm 实例， 减 0 是为了字符串转为数字运算
                    return (this.mathScore-0) + (this.englishScore-0)
               }
           },
            computed: { //计算属性
                sumScore1 : function () {
                    //在控制台输入vm.sumScore1 不会被重新调用,说明计算属性有缓存
                    console.info('sumScore1被调用')
                    return (this.mathScore - 0) + (this.englishScore -0)
               }
           }
       })
    </script>
</body>

计算属性（双向绑定）

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

  數學<input type="text" v-model="shuxue">
        英語<input type="text" v-model="english">
总分coments方法<input type="text" v-model="allnum3">



allnum3:{
            get:function(){
                console.log('get方法绑定')
            var allnu=(this.shuxue-0)+(this.english-0);
            return allnu
            },
               set: function (newValue) {//value为更新后的值
                        // 被调用则更新了sumScore2，然后将数学和英语更新为平均分
                        var avgScore = newValue / 2
                        this.shuxue = avgScore
                        this.english = avgScore
                   }
          


        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

        數學<input type="text" v-model="shuxue">
        英語<input type="text" v-model="english">
        总分method方法<input type="text" v-model="allnum()">
        总分coments方法<input type="text" v-model="allnum2">
        总分coments方法<input type="text" v-model="allnum3">
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
var vm=new Vue({
    el:'#app',
    data:{
        shuxue:120,
        english:110

    },
    methods: {
        allnum:function(){
            var allnu=(this.shuxue-0)+(this.english-0);
            return allnu
        }
    },
    computed: {
        allnum2:function(){
            var allnu=this.shuxue+this.english;
            return allnu
        },
        allnum3:{
            get:function(){
                console.log('get方法绑定')
            var allnu=(this.shuxue-0)+(this.english-0);
            return allnu
            },
               set: function (newValue) {//value为更新后的值
                        // 被调用则更新了sumScore2，然后将数学和英语更新为平均分
                        var avgScore = newValue / 2
                        this.shuxue = avgScore
                        this.english = avgScore
                   }
          


        }
    }
   
})
    </script>
</body>
</html>