Vue的学习经验

最新推荐文章于 2024-05-29 12:00:00 发布

淡逝奈成风吟

最新推荐文章于 2024-05-29 12:00:00 发布

阅读量214

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/YANNINGXINYI/article/details/106695251

版权

一、Vue的基本使用及模板语法

1、Vue简介

1.1 Vue是一套用于构建用户界面的渐进式框架：声明式渲染—>组件系统—>客户端路由—>集中式状态管理—>项目构建

1.2 优点：

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue

灵活：在一个库和一套完整框架之间自如伸缩

高效：20kB运行大小，超快虚拟DOM

2、Vue的基本使用

2.1 Vue使用的基本步骤

1、需要提供标签用于填充数据

2、引入vue.js库文件

3、可以使用vue的语法做功能了

4、把vue提供的数据填充到标签里面

2.2 Hello World实例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{1+1}}</div>
        <div>{{msg+'-----'+123}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello World'
            }
        })
    </script>
</body>

</html>

1、实例参数分析：
el：元素挂载位置(值可以是CSS选择器或者DOM元素)
data：模型数据(值是一个对象)
2、差值表达式用法：
-#### 将数据填充到HTML标签中
-#### 差值表达式支持基本的计算操作
3、Vue代码运行原理分析
概述编译过程的概念(Vue语法—>原生语法)

在这里插入图片描述

3、Vue的模板语法

3.1 前端渲染

1）定义：把数据填充到HTML标签中

2）前端渲染方式

原生js拼接字符串

使用前端模板引擎

使用vue特有的模板语法

3）模板语法概览：

差值表达式

指令

事件绑定

属性绑定

样式绑定

分支循环结构

3.2 指令

1）指令定义

本质就是自定义属性
指令的格式：Vue中都是以v-开头的

2）v-cloak指令

v-cloak：防止页面加载时出现闪烁问题；

“闪动”产生原因：Vue解析差值表达式是先将差值表达式显示在页面
中，然后迅速替换为对应的内容；
原理：先通过样式隐藏内容，然后在内存中进行值的替换,替换好之
后再显示最终的结果；

指令用法：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <style>
        [v-cloak] {
        	//数据隐藏
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        /*
            v-cloak指令的用法
            1、提供样式
            [v-cloak]{
                display: none;
            }
            2、在差值表达式所在的标签中添加v-cloak指令
            背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换,替换好之后再显示最终的结果
        */
        var vm = new Vue({
        	//el  指定元素 id 是 app 的元素  
            el: '#app',
            //  data  里面存储的是数据
            data: {
                msg: 'Hello World'
            }
        })
    </script>
</body>

</html>

运行结果如图：

在这里插入图片描述

3）数据绑定指令

v-text：填充纯文本(单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值)。
特点：相比差值表达式更加简洁，没有“闪动”问题
v-html：填充HTMl片段
特点：
1、存在安全问题
2、本网站内部数据可以使用，来自第三方的数据不可以用
v-pre：填充原始信息
特点：显示原始信息，跳过编译过程(分析编译过程)

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数据绑定指令</title>
</head>

<body>
    <div id="app">
        <div v-text="msg"></div>
        <div v-html="msg1"></div>
        <div v-pre="msg2"></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                msg1: '<h1>VUE</h1>',
                msg2: '{{}}'
            }
        })
    </script>
</body>

</html>

运行结果如图：

加粗样式

4）数据响应式

响应式：
1、html5中的响应式：屏幕尺寸变化导致样式的变化
2、数据的响应式：数据的变化导致页面内容的变化
数据绑定：将数据填充到标签中，用指令或差值表达式默认就是响应式的
v-once：只编译一次，显示内容之后不再具有响应式功能
v-once使用场景：如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能

3.3 双向数据绑定

    1）定义：数据内容的变化会导致显示发生变化

在这里插入图片描述
2）双向数据绑定分析
v-model指令用法

淡逝奈成风吟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习经验

一、Vue的基本使用及模板语法1、Vue简介1.1 Vue是一套用于构建用户界面的渐进式框架：声明式渲染—>组件系统—>客户端路由—>集中式状态管理—>项目构建1.2 优点：易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue灵活：在一个库和一套完整框架之间自如伸缩高效：20kB运行大小，超快虚拟DOM2、Vue的基本使用2.1 Vue使用的基本步骤1、需要提供标签用于填充数据2、引入vue.js库文件3、可以使用vue的语法做功能了4、把
复制链接

扫一扫