Vue 中一些常用的指令和用法及其一些案例

编辑

一，mustache 语法

二，Vue —— v-for 指令

数据绑定：就是将数据填充到网页中

数据响应式：在网页控制台更改页面数据的过程就叫数据响应式

一，mustache 语法

使用“mustache” 语法 {{ msg }}（双花括号）
mustache 标签将会被替换为 data 对象上对应的 msg 属性的值。
只要绑定的数据对象上的 msg 属性发生改变，插值内容也会随之更新。


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>Documenttitle>
	<script src="../Vue/vue.js">script>
head>
<body>
	<div id="app">
		
		<h2>{{fistname +'-'+lastname}}h2>
	div>
	<script>
		const vm = new Vue({
			el:'#app',
			data(){
				return{
					fistname:'李',
					lastname:'华'
				}
			}
		})
	script>
body>
html>

注意：

mustach语法支持 js 的数据类型
mustach语法不支持 console.log 和 alert()

二，Vue —— v-for 指令

v-for有三个值:

v-for="数组或对象中的每一个值 in/of 数组或对象本身"


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>Documenttitle>
    <script src="../Vue/vue.js">script>
head>
 
<body>
    <div id="app">
        <div>{{list}}div>
        直接写渲染的结果是['李华','小明','小丽']
        
        v-for有三个值:
        v-for="数组或对象中的每一个值 in/of 数组或对象本身"
        <div v-for="item in list">{{item}}div>
 
        <div v-for="item of obj">{{item}}div>
        
        
        <h2 v-for="(item,index) in list" :key="index"> {{item}} h2>
        在将来的项目中写v-for是需要加上:key 他的值可以写索引最好写数据中的id值
          
        
    div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    list: ['李华', '小明', '小丽'],
                    obj: {
                        a: 1,
                        b: 2,
                        c: 3
                    },
                    obj2: [
                        { id: 1, realname: '李华', age: 19 },
                        { id: 2, realname: '小丽', age: 29 },
                        { id: 3, realname: '小明', age: 11 },
                        { id: 4, realname: '小红', age: 16 }
                    ]
 
                }
            }
        })
    script>
body>
 
html>

数据绑定：就是将数据填充到网页中

数据响应式：在网页控制台更改页面数据的过程就叫数据响应式

三，Vue —— v-once 指令

不需要表达式

只渲染元素和组件一次。显示内容之后就不再具有响应式功能（无法用数据响应式更改网页数据）

应用场景：如果显示的数据信息后续不需要再次修改，可以使用v-once，这样可以提高性能。


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>Documenttitle>
    <script src="../Vue/vue.js">script>
head>
 
<body>
    <div id="app">
        普通插值 
        <h2>{{msg}}h2>
        v-once 只渲染一次
        <h2 v-once>{{msg}}h2>
    div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return { 
                    msg: '我是否会改变呢？' 
                   
 
                }
 
            }
        })
    script>
body>
 
html>

四，Vue —— 增减小案例


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>Documenttitle>
    <script src="../Vue/vue.js">script>
head>
 
<body>
    <div id="app">
        
        
        <button @click="add">+button>
        <h1>{{count}}h1>
        <button @click="sub">-button>
    div>
body>
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                count: 0
            }
        },
        methods: {
            add() { //以后所有的方法都写在methods里面
                this.count++
            },
            sub() {
                this.count--
            }
        }
    })
script>
 
html>

效果图：

五，Vue —— v-html 指令

作用：填充HTML片段 但是存在安全问题可以再本网在内部数据使用，如果是来自第三方的数据不可用

属于：数据绑定指令

是 innerHTML 更新的新版作用与innerHTML 类似


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>Documenttitle>
    <script src="../Vue/vue.js">script>
head>
<body>
    <div id="app">
        v-html 可以解析html格式, 与innerHTML用法相似
        
        <h2 v-html="url">h2>
    div>
    <script>
        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    url:""
                }
            }
        })
 
    script><a href="http://www.baidu.com">百度一下a>
body>
html>

六，Vue —— v-text 指令

作用：填充纯文本 与插值表达式相比更加简洁

属于 数据绑定指令

没有 v-text属性的只会插入与msg对应的data数据下例结果为今天周几啊？周六

有v-text 属性会覆盖标签内所有的内容与innerText很相似然后再插msg数据


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>Documenttitle>
    <script src="../Vue/vue.js">script>
head>
<body>
    <div id="app">
        <h2>今天周几啊？{{msg}}h2>
        v-text指令 与 inntext的作用相似
        <h2 v-text="msg">   今天周几啊？  {{msg}}  h2>
    div>
    <script>
        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    msg:"周六"
                }
            }
        })
    script>
body>
html>

七，Vue —— v-pre 指令

跳过这个元素和它的子元素的编译过程。

属于：数据绑定指令

v-pre 可以用来显示原始 Mustache 标签。跳过编译过（分析编译过程）


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>Documenttitle>
    <script src="../Vue/vue.js">script>
head>
<body>
    <div id="app">
        <h1>{{msg}}h1>
        <h1 v-pre>{{msg}}h1>
    div>
body>
    <script>
        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    msg:'我直接都不渲染你气不气'
                }
            }
        })
    script>
html>

八，Vue —— v-cloak 指令

1，提供样式


            [v-cloak]{
 
               display:none;
 
                }

2, 在插值表达式所在的标签中添加 v-cloak指令

执行原理：先通过样式隐藏内容，然后在内存中进行值得更新，更新好之后在显示最终的结果

主要是为了解决闪动问题


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>解决闪动的方法title>
    <script src="../Vue/vue.js">script>
    <style>
        [v-cloak] {
            display: none;
        }
    style>
head>
<body>
    
 
    <div id="app">
        <div v-cloak>{{msg}}div>
    div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '你是李四嘛？'
            }
        })
    script>
body>
 
html>

九，Vue——v-bind 指令

v-bind 可以简写成：

含义：

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

声明：下篇文章将详细介绍 v-bind指令用法及实操小案例不要走开广告之后更加精彩哦！

相关阅读:
美国开源数据库ScyllaDB完成4300万美元融资
 recovery模式差分（增量）升级小结
 springdatajpa关键词查询
 NLG（自然语言生成）评估指标介绍
 [附源码]计算机毕业设计-中国传统手工艺销售平台Springboot程序
 矢量（vector）瓦片与栅格（raster）瓦片对比
 Flutter 完全手册
 leetcode：21. 合并两个有序链表
 WindowsNT下的OpenGL
代码随想录单调栈part3
原文地址：https://blog.csdn.net/qq_52499703/article/details/126004327