Vue 一套构建用户界面的渐进式的框架（模板语法篇~）

模板语法代码规范：最好每次缩进俩个空格更符合规范哟~创建Vue实例传入的optionsel类型：string | HTMLElement作用：用于挂载要管理的元素节点,值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。data类型：Object | Function（组件当中data必须是一个函数）作用：Vue实例对应的数据对象methods类型： {[key:str

Jine~

3419人浏览 · 2020-09-25 16:35:25

Jine~ · 2020-09-25 16:35:25 发布

模板语法

代码规范：最好每次缩进俩个空格更符合规范哟~

创建Vue实例传入的options

el

类型：string | HTMLElement
作用：用于挂载要管理的元素节点,值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。

data

类型：Object | Function（组件当中data必须是一个函数）
作用：Vue实例对应的数据对象

methods

类型： {[key:string]:Function}
作用：定义属于Vue的一些方法，可以在其他地方调用，也可在指令中使用

插值操作

Mustache

是双大括号  {{}}

Mustache 语法中，不仅可以直接写变量，也可以写简单的表达式

有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}



===============================================================
例如：

<body>
    <div class="container">
        <h2>{{firstName+" "+lastName}}</h2>
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{count*2}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app=new Vue({
            el:".container",
            data:{
                firstName:"Stephen",
                lastName:"Curry",
                count:1
            }
        })
    </script>

v-once

表示元素和组件只渲染一次，不会随着数据的改变而改变


代码如下，例如：

<body>
    <div class="container">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: ".container",
            data: {
                message: "Jine"
            }
        })
    </script>
</body>


图片如下：

v-html

某些情况，服务器响应回来的数据可能是元素标签（<a herf="xxx"></a>）

若我们直接通过{{}}输出，会将HTML代码也一起输出，所以要使用v-html按照HTML格式解析


代码如下，例如：

<body>
    <div class="container">
        <h1>{{message}}</h1>
        <h1 v-html="message"></h1>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el:".container",
            data:{
                message:"<a href='http://www.baidu.com'>百度一下你就知道</a>"
            }
        })
    </script>
</body>


效果图片如下：

v-text（不推荐）

会显示文本输出，但不推荐这样写法，不如Mustache语法好用。
如：再拼接字符串时候，v-text会进行覆盖而不会去拼接

所以不进行展示说明

v-pre（不推荐）

用于跳过编译过程，直接显示原内容，并不会像mustache语法进行解析

例如：

/*若message内容为：Jine*/

<h2>{{message}}</h2>
/*结果为：Jine*/

<h2 v-pre>{{message}}</h2>
/*结果为：{{message}}*/

v-cloak

意思为斗篷，再vue声明后，会将v-cloak属性删除


例如：

    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div class="app" v-cloak>{{message}}</div>
    <script src="./vue.js"></script>
    <script>
        /*
            设置了延迟2秒的计时器，可看出效果：
                v-cloak再vue声明和绑定DOM树之前会存在
                绑定成功后：vue会自动删除Dom树中的v-cloak属性
        */
        setTimeout(() => {
            const app = new Vue({
            el:".app",
            data:{
                message:"Jine"
            }
        })
        }, 2000);
      
    </script>
</body>

v-bind（动态绑定属性）

动态绑定属性

'动态绑定属性，用来绑定一个或多个属性值。'

在开发中，有很多属性需要动态进行绑定（如：src，href，动态绑定一些类、样式等）

一般语法（v-bind:）
语法糖（:）

例如： :属性名='属性值'

若值为：null、undefined 或 false 则不会渲染到页面



有如下绑定代码，例如：


<body>
   <div class="app">
       <img v-bind:src="img" alt="">
       <a v-bind:href="url">百度一下，你就知道</a>
       <!-- 语法糖写法 -->
       <img :src="img" alt="">
   </div> 
   <script src="./vue.js"></script>
   <script>
       const app = new Vue({
           el:".app",
           data:{
               img:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=121352583,3553479540&fm=26&gp=0.jpg",
               url:"http://www.baidu.com"
           }
       })
   </script>
</body>

动态绑定class（对象语法）

对象语法含义：class后面跟的是一个对象

可以动态的进行控制class的添加或删除（原生写比较麻烦）


例如，点击按钮给方块动态变色，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <style>
        .view{
            width: 100px;
            height: 100px;
            background-color: rgb(129, 46, 115);
        }

        .changeColor{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="view" :class='{changeColor:isStatus}'></div>
        <button @click='change'>点击变色</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el : '.app' ,
            data : {
                isStatus : false
            },
            methods : {
                change(){
                    this.isStatus = !this.isStatus
                }
            }
        })
    </script>
</body>
</html>

动态绑定style（对象语法）

<!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 class="app">
        <h2 :style='{color:col,fontSize:fs + "px"}'>哈哈哈哈哈</h2>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el : '.app' ,
            data : {
                fs : 100,
                col : "red"
            }
        })
    </script>
</body>
</html>

动态绑定class或style（数组语法，不推荐）

利用数组方式来绑定，此方法不推荐，不细写。

<div v-bind:class="[activeClass, errorClass]"></div>

errorClass 是始终存在的，isActive 为 true 时添加activeClass 类：

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

v-bind 结合 for （点击文字变色）

'第一个文字默认红色，点击哪个文字，哪个变红'


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点字变色</title>
    <style>
        .color{
            color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul >
            <li v-for='(iteam,index) in list' :class="{color:isStatus===index}" @click="change(index)">{{iteam}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el : '.container',
            data : {
                list : ['First','Second','Third','Fourth','Fivth'],
                isStatus : 0
            },
            methods : {
                change (index) {
                    return this.isStatus = index;
                }
            }
        })
    </script>
</body>
</html>

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。
由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。


以下实例对输入的字符串第一个字母转为大写：

实例:
<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'jine'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

自定义指令

更多说明：参考Vue官方文档

例如： 定义获取元素焦点指令

Vue.directive('focus' {
	inserted : (el) => {
    //获取元素焦点
    el.focus()
}
              
})


使用：
<input type='text' v-focus>

带参指令，改变元素背景色，例如：

定义：

Vue.directive('color',{
	inserted : (el,binding) => {
		el.style.backgroundColor = binding.value.color
	}
})

使用：
<input type='text' v-color='{color:"red"}'>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

Jine~

@weixin_42760849

已为社区贡献3条内容