Vue中常用基础标签

发布时间：2020-12-14 05:06:56 所属栏目：大数据来源：网络整理

导读：创建一个Vue实例 var vm = new Vue(){ el:'#app',data:{},methods:{} } 在html中完整代码 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width,initial-scale=1.0" meta http-equiv="X-UA-Compatible"

创建一个Vue实例

var vm = new Vue(){  
        el:'#app',data:{},methods:{}  }

在html中完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
    var vm = new Vue({
        el:'#app',methods:{}
    })
    </script>
</body>
</html>

常用标签用法:v-cloak、v-html、v-bind、v-on

差值表达式和v-cloak

{{}} (差值表达式):

<div id="app">
        <p>{{msg}}</p>
    </div>

js代码 :

var vm = new Vue({
     el:'#app',data:{
         msg:"Hello world!"
     },methods:{}
})

使用v-cloak:

<div id="app">
        <p v-cloak>{{msg}}</p>
    </div>

区别：v-cloak会屏蔽

标签中的{{msg}}，解决文本闪烁问题。ps:{{}}前后可以自定义文本，且在使用v-claok后

? 和msg一起显示

测试方法：将vue.js在DOM之后导入，使用live server打开页面，将network调至slow 3G，会发现差值表达式方法的页面会先显示{{msg}}再显示"Hello world!"。

v-html和v-text

v-html：可以识别msg文本中的DOM标签。

v-text：识别纯文本，且只识别msg中的文本，

标签中的文本不会被识别

v-html

<div id="app">
        <p v-html="msg"></p>
    </div>

var vm = new Vue({
     el:'#app',data:{
         msg:"<h2>你好，我在测试v-html的作用</h2>"
     },methods:{}
})

v-text

<div id="app">
        <p v-html="msg">2222211</p>
    </div>

var vm = new Vue({
     el:'#app',})

v-bind

可以绑定属性,可以直接简写为冒号‘:’。下面例子将title属性绑定在mytitle上

<div id="app">
    <!--可直接将v-blind:简写为“:”  -->
        <input type="button" value="按钮" v-bind:title="mytitle" >
    </div>

var vm = new Vue({
     el:'#app',data:{
         mytitle:"这是一个button"
     },})

v-on

给DOM绑定事件。

<div id="app">
    <!--可直接将v-on:简写为“@”  -->
        <input type="button" value="按钮" v-on:click="show">
</div>

var vm = new Vue({
     el:'#app',methods: {
                show: function () {
                    alert("Hello!");
                }
            },})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!