学习记录——Vue基础使用和模版语法

最新推荐文章于 2024-04-20 06:48:12 发布

火星飞鸟

最新推荐文章于 2024-04-20 06:48:12 发布

阅读量230

点赞数 2

分类专栏： vue 前端整理文章标签：前端 vue

本文链接：https://blog.csdn.net/Jack_lzx/article/details/110407715

版权

前端整理同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

1. Vue基本使用

1.1 `Hello World`基本步骤

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{1 + 2}}</div>
        <div>{{msg + '----' + 123}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // Vue的基本使用步骤
        // 1、 需要提供标签用于填充数据
        // 2、 引入vue.js库文件
        // 3、 可以使用vue的语法做功能了
        // 4、 把vue提供的数据填充到标签里面
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        });
    </script>
</body>

（1）实例参数

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）

（2）插值表达式

将数据填充到HTML标签中
插值表达式支持基本的计算操作

（3）Vue代码运行

编译（Vue语法→原生JS语法）

2. Vue模板语法

2.1 前端渲染

在这里插入图片描述

2.2 模板语法概览

差值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

2.3 指令

指令的本质就是自定义属性
指令的格式：以v-开始（比如：v-cloak）

2.3.1 `v-cloak`指令

解决插值表达式存在的问题：“闪动”。
原理：先隐藏，替换好值之后再显示最终的值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // v-cloak指令的用法
        // 1、提供样式
        //   [v-cloak]{
        //     display: none;
        //   }
        // 2、在插值表达式所在的标签中添加v-cloak指令
		// 在数据渲染完场之后，v-cloak属性会被自动去除，v-cloak一旦移除也就是没有这个属性了
		// 属性选择器就选择不到该标签，也就是对应的标签会变为可见
        // 背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        });
    </script>
</body>

</html>

2.3.2 `v-text`指令

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将HTML标签一并输出，不会解析
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

<div id="app">
    <!--  
		注意:在指令中不要写插值语法  直接写对应的变量名称 
        在 v-text 中 赋值的时候不要在写 插值语法
		一般属性中不加 {{}}  直接写 对应 的数据名 
	-->
    <p v-text="msg"></p>
    <p>
        <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
        {{msg}}
    </p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

</script>

2.3.3 `v-html`指令

用法和v-text相似，但是他可以将HTML片段解析并填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行HTML解析，但v-html会将其当HTML标签解析后输出。

<div id="app">
　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
    <p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
　　let app = new Vue({
　　el: "#app",
　　data: {
　　　　message: "<span>通过双括号绑定</span>",
　　　　html: "<span>html标签在渲染的时候被解析</span>",
　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
　　}
 });
</script>

2.3.4 `v-pre`指令

显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程
一些静态的内容不需要编译加这个指令可以加快渲染

<div id="app">
    <span v-pre>{{ this will not be compiled }}</span>    
	<!--  显示的是{{ this will not be compiled }}  -->
	<span v-pre>{{msg}}</span>  
     <!--   即使data里面定义了msg这里仍然是显示的{{msg}}  -->
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

</script>

2.3.5 `v-once`指令

只编译一次，执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

<div id="app">
  <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
  <span v-once>{{msg}}</span>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
  // v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。
  var vm = new Vue({
      el: '#app',
      data: {
          msg: 'Hello Vue',
      }
  });
</script>

2.3.6 双向数据绑定`v-model`

在这里插入图片描述

<input type='text' v-model='uname'/>

MVVM设计思想：

M (model)
V (view)
VM (View-Model)

低层实现原理：

<input v-bind:value="msg" v-on:input="msg=$event.target.value">
<input type="text" v-model='msg'>

上面两行等价

2.4 事件绑定

2.4.1 基本用法

<div id="app">
    <div>{{num}}</div>
    <div>
        <button v-on:click='num++'>点击</button>
        <button @click='num++'>点击1</button>
        <button @click='handle'>点击2</button>
        <button @click='handle()'>点击3</button>
    </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        num: 0
    },
    // methods中主要是定义一些函数
    methods: {
        handle: function() {
            // 这里的this是Vue的实例对象+
            console.log(this === vm);
            //   在函数中想要使用data里面的数据,一定要加this 
            this.num++;
        }
    }
});

2.4.2 传递参数

<div id="app">
    <div>{{num}}</div>
    <div>
        <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
        <button v-on:click='handle1'>点击1</button>
        <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显式传递，
             并且事件对象的名称必须是$event 
        -->
        <button v-on:click='handle2(123, 456, $event)'>点击2</button>
    </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        num: 0
    },
    methods: {
        handle1: function(event) {
            console.log(event.target.innerHTML)
        },
        handle2: function(p, p1, event) {
            console.log(p, p1)
            console.log(event.target.innerHTML)
            this.num++;
        }
    }
});

2.4.3 事件修饰符

.stop 阻止冒泡

<a v-on:click.stop="handle">跳转</a>

.prevent 阻止默认行为

<a v-on:click.prevent="handle">跳转</a>

2.4.4 按键修饰符

.enter 回车键
.esc 退出键
.delete 删除键

<input v-on:keyup.enter='submit'>

自定义按键修饰符：

Vue.config.keyCodes.f1 = 112   // 全局定义

2.5 属性绑定

<a v-bind:href='url'>跳转</a>

缩写形式：

<a :href='url'>跳转</a>

2.6 样式绑定

2.6.1 `class`样式处理

对象语法：

<div v-bind:class="{ active: isActive }"></div>

数组语法：

<div v-bind:class="{ active: isActive }"></div>

2.6.2 `style`样式处理

对象语法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

数组语法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

2.7 分支结构

<div v-if='score>=90'>优秀</div>
<div v-else-if='score<90&&score>=80'>良好</div>
<div v-else-if='score<80&&score>60'>一般</div>
<div v-else>比较差</div>
<div v-show='flag'>测试v-show</div>

`v-show` 和 `v-if` 的区别

v-show本质就是标签display设置为none，控制隐藏
v-show只编译一次，后面其实就是控制css，而v-if不停地销毁和创建，故v-show性能更好一点
v-if是动态向DOM树内添加或者删除DOM元素
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

2.8 循环结构

（1）v-for遍历数组

<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>

key的作用：

key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM，提高性能

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

（2）v-for遍历对象

<div v-if='v=="female"' v-for='(v,k,i) in user'>{{v + '---' + k + '---' + i}}</div>
<!-- (v,k,i)分别代表值、键、索引，顺序固定，名字可自定义 -->

（3）v-if和v-for结合使用（不推荐，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级）

<div v-if='value==12' v-for='(value, key, index) in object'></div>

火星飞鸟

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
学习记录——Vue基础使用和模版语法

1. Vue基本使用1.1 Hello World基本步骤<body> <div id="app"> <div>{{msg}}</div> <div>{{1 + 2}}</div> <div>{{msg + '----' + 123}}</div> </div> <script type="text/javascript
复制链接

扫一扫