vue.js核心技术开发

程序员文章站 2022-06-23 12:27:29

vue.js入门开发vue {{}} 双向数据绑定 Document<...

vue.js入门开发

vue {{}} 双向数据绑定

<!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">
        <!-- {{}} 用于标签内显示数据 -->
        Hello , {{msg}}  <br>  
        <!-- v-model 进行数据双向绑定 -->
        <input type="text"  v-model="msg">
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:'#app',  // 指定被vue管理的入口,值为选择器，不可以指定body或者html
            data:{  // 初始化数据，在vue实例管理的Dom节点下，可以通过模板请求来引用
                msg: '你好啊，王佳伟同学，你最棒！' 
            }
        })
    </script>
</body>
</html>

vue.js核心技术开发

MVVC 模型

MVVC模型是 Model-View-ViewModel 的缩写，是一种软件架构风格。

他的哲学思想上：

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

Model - 代表模型，就是数据对象，data
View - 代表视图，就是模板页面
ViewModel - 视图模型，本质上就是Vue实例
vue.js核心技术开发
原理哈！ view 的值被更改了之后，DOM Listeners 监听到输入框的值发生改变之后，会将 Model 中的数据进行更新。更新了之后，在通过 Data Bindings 数据绑定，将更新的Model中的数据渲染到 View 页面。

上面的过程不需要我们开发者手动去进行操作，Vue已经帮我们完成了。我们只需要在页面上遵守Vue 的语法规则就可以自动帮我们实现以上功能。

Vue Devtools 插件

Vue Devtools 插件可以让我们在一个更友好的界面中审查和调试Vue项目。

推荐在浏览器上安装 Vue Devtools。

模板数据绑定渲染

可生成动态的 HTML 页面，页面中使用嵌入 Vue.js 语法动态生成。

{{ xxxx }} 双大括号文本绑定
v-xxx 以 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>{{ msg }}</p>
        <!-- 直接执行JS表达式 -->
        <p>{{ sorce + 1 }}</p>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',  
            data:{  
                msg: '王佳伟，你最棒！' ,
                sorce: 100,
            }
        })
    </script>
</body>
</html>

v-once一次性插值

通过 v-once 指令，只执行一次性的插值，当数据改变的时候，插值处的数据不会被更新。

<h3>一次性插值 v-once</h3>
<p v-once>{{msg}}</p>

使用 v-once 修饰之后，当 msg 数据发生变化时，Dom元素上的数据也不会在更新。如果以后有相应的需求可以使用这个标签，但是使用的比较少，基本上不会使用，但是以防万一，遇到类似的需求知道有这个东西。

vue.js核心技术开发

输出HTML指令 v-html

允许直接渲染标签，而不是以文本的方式渲染。

如果想要输出HTML数据，双大括号将数据以普通文本的方式输出，为了输出真正的HTML效果，需要使用 v-html 指定。

<p>v-html的形式：<span v-html="contentHtml"></span></p>

为了防止 XSS 攻击。在此指令上做了安全处理，如果发现输出内容上有script标签的时候，则不渲染。XSS攻击主要是利用了JS脚本注入到网页，读取cookie，读取到了之后发送到黑客的服务器，从而让黑客可以使用你的账号信息做非法操作，还可以进入你的支付，跳转到钓鱼网站。

<!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>{{ msg }}</p>
        <!-- 直接执行JS表达式 -->
        <p>{{ sorce + 1 }}</p>
        <h3>一次性插值 v-once</h3>
        <p v-once>{{msg}}</p>
        <h3>指令输出真正的HTML内容 v-html</h3>
        <p>双大括号的形式：{{contentHtml}}</p>
        <p>v-html的形式：<span v-html="contentHtml"></span></p>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',  
            data:{  
                msg: '王佳伟，你最棒！' ,
                sorce: 100,
                contentHtml:`<span style="color:red">王佳伟，你最棒！
                    <script>alert("我是大傻逼！")<\/script>
                    </span>`
            }
        })
    </script>
</body>
</html>

vue.js核心技术开发

元素绑定指令 v-bind

完整格式：

v-bind:元素的属性名='xxxx'

缩写格式：

:元素属性名 = 'xxx'

作用：将数据动态绑定到指定元素属性上面。

事件绑定指令 v-on

完整格式：

v-on:事件名称="事件处理函数名"

缩写格式：

@事件名称 = "事件处理函数名"   注意：@后面没有冒号

作用：用于监听DOM事件。

<!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>{{ msg }}</p>
        <!-- 直接执行JS表达式 -->
        <p>{{ sorce + 1 }}</p>
        <h3>一次性插值 v-once</h3>
        <p v-once>{{msg}}</p>
        <h3>指令输出真正的HTML内容 v-html</h3>
        <p>双大括号的形式：{{contentHtml}}</p>
        <p>v-html的形式：<span v-html="contentHtml"></span></p>
        <h3>元素绑定指令 v-bind</h3>
        <!-- 完整 -->
        <img v-bind:src="imgUrl">  
        <!-- 简化 -->
        <img :src="imgUrl">
        <h3>事件绑定指令 v-on</h3>
        <input type="text" value="1" v-model="num">
        <!-- 完整 -->
        <button v-on:click="add">完整点击 +1</button>
        <!-- 简化 -->
        <button @click="add">简化点击 +1</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',  
            data:{  
                msg: '王佳伟，你最棒！' ,
                sorce: 100,
                contentHtml:`<span style="color:red">王佳伟，你最棒！
                    <script>alert("我是大傻逼！")<\/script>
                    </span>`,
                imgUrl:'https://profile.csdnimg.cn/B/9/A/3_weixin_42776111',
                num : 1
            },
            methods:{
                add:function(){
                    this.num ++
                }
            }
        })
    </script>
</body>
</html>

vue.js核心技术开发

本文地址：https://blog.csdn.net/weixin_42776111/article/details/107496796

vue.js核心技术开发

vue.js入门开发

vue {{}} 双向数据绑定

MVVC 模型

Vue Devtools 插件

模板数据绑定渲染

v-once一次性插值

输出HTML指令 v-html

元素绑定指令 v-bind

事件绑定指令 v-on

vue.js多页面开发环境搭建过程

JVM核心教程之JVM运行与类加载全过程详解

seo优化核心价值是什么

浅析软文营销需要解决的三个核心问题

详解Vue.js项目API、Router配置拆分实践

vue.js实现带日期星期的数字时钟功能示例

PHP技术开发微信公众平台

浅谈webpack 四个核心概念之Entry

Vue.js中的组件系统

浅谈Vue.js 关于页面加载完成后执行一个方法的问题