vue.js基础（3）

最新推荐文章于 2023-11-24 15:33:25 发布

power_to_go_l7

最新推荐文章于 2023-11-24 15:33:25 发布

阅读量227

点赞数

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/power_to_go_l7/article/details/79707443

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

模板语法

vue.js使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定至底层VUE实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器

在底层的实现上，ＶＵＥ将模板编译成虚拟dom渲染函数。结合响应系统，Vue能够智能的计算出最少需要重新渲染多少组件，并把dom操作次数减到最少。

插值

文本

使用“Mustache”语法文本插值

<span>Message:{{msg}}</span>

++Mustache++标签将会被替代为对应数据上++ms++g属性的值，当++msg++发生变化时，插值处内容会被更新。
通过使用++v-once++指令，也能执行一次插值，当数据改变时，插值处内容不会更新，但会影响到该节点上其他数据的绑定：

<span v-once>将不会改变：{{msg}}</span>

原始HTML

双 =={{}}== 会将数据解释为普通文本（不是HTML 代码），为了输出真正的的HTML，需要使用++v-html++指令

<p>Using mustaches:{{rawHtml}}</p>
<p>Using v-html directive：<span v-html="rawHtml"></span></p>

++span++中的内容将会被替换成属性值 ++rawHtml++，直接作为 HTML——会忽略解析属性值中的数据绑定。不能使用 v-html 来复合局部模板

注：只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值

特性

++Mustache++语法不能作用在++HTML++特性上，应使用v-bind指令：

<div v-bind:id="dynamicId"></div>

在布尔特性的情况下，它们的存在即暗示为++true++，v-bind 工作起来略有不同，例：

<button v-bind:disabled="isButtonDisabled">button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 ++++ 元素中。

使用JAVASCRIPT表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{number + 1}}
{{ok ? 'YES' : 'NO'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id"></div>

表达式会在所属Vue实例的数据作用域下作为javascript被解析，限制：每个绑定都只能包含单个表达式，所以下面的例子不会生效

<!--这是语句，不是表达式-->
{{ var a = 1}}
<!--流控制也不会生效，请使用三元表达式-->
{{ *if(ok) {return message}}}

注：不应该在模板表达式中试图访问用户定义的全局变量。

指令

指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式（v-for 是例外情况）。

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<p v-if="seen">seen</p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">..</a>

修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

缩写

Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind缩写

<!--完整语法-->
<a v-bind:href="url">...</a>
<!--缩写-->
<a :href="url"></a>

v-on缩写

<!--完整语法-->
<a v-on:click="doSomething">..</a>
<!--缩写-->
<a @click="doSomething">..</a>

注：与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。

过滤器

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

<!--在两个大括号中-->
{{message | capitalize}}
<!--在v-bind指令中-->
<div v-bind:id="rawId | formaId"></div>

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

过滤器可以串联

{{message | filterA | filterB}}

过滤器是 JavaScript 函数，因此可以接受参数：

{{message | filterA('arg1',arg2)}}

message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        .class{
            background:blue;
            color:red;
        }
    </style>
    <body>
        插值
        1）文本
        <div id="app">
            <p>{{message}}</p>
        </div>
        2)html 
        <div id="app1">
            <div v-html="message"></div>
        </div>
        3)属性
        v-bind指令
        <div id="app2">
            <label for="r1">修改颜色</label>
            <input type="checkbox" v-model="class1" id="r1" />
            <br>
            <div v-bind:class="{'class':class1}">
                directiva v-bind:class
            </div>
        </div>
        4）表达式
        Vue.js 都提供了完全的 JavaScript 表达式支持。
        <div id="app3">
            {{5+5}}<br>
            {{ok ? 'YES':'NO'}}<br>
            {{message.split('').reverse().join('')}}
            <div v-bind:id="'list-'+id">
                javascript
            </div>
        </div>
        指令
        指令是带有 v- 前缀的特殊属性。
        <div id="app4">
            <p v-if="seen">seen</p>
            <template v-if="ok">
                <h1> 123 </h1>
                <p> 456 </p>
                <p>789</p>
            </template>
        </div>
        1)参数
        <div id="app5">
            <pre><a v-bind:href="url">333</a></pre>
        </div>
        用户输入
        <div id="app6">
            <p>{{message}}</p>
            <input v-model="message" />
        </div>
        字符串反转
        <div id="app7">
            <p>{{message}}</p>
            <button v-on:click="reverseMessage">反转字符串</button>
        </div>
        过滤器
        <div id="app8">
            {{message | capitalize}}
        </div>
    </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    //文本
    new Vue({
        el:'#app',
        data:{
            message:'hello Vue.js!'
        }
    });
    //2)html 
    new Vue({
        el:"#app1",
        data:{
            message:'<h1>123</h1>'
        }
    });
    //3)属性 v-bind指令
    new Vue({
        el:'#app2',
        data:{
            class1:false
        }
    });
    //4）表达式
    new Vue({
        el:'#app3',
        data:{
            ok:true,
            message:'runoob',
            id:1
        }
    });
    //指令
    new Vue({
        el:'#app4',
        data:{
            seen:true,
            ok:true
        }
    });
    //参数
    new Vue({
        el:'#app5',
        data:{
            url:"http://runoob.com"
        }
    });
    //用户输入
    new Vue({
        el:'#app6',
        data:{
            message:'Runoob!'
        }
    });
    //反转字符串
    new Vue({
        el:"#app7",
        data:{
            message:"123456!"
        },
        methods:{
            reverseMessage:function(){
                this.message=this.message.split('').reverse().join('')
            }
        }
    });
    //过滤器
    new Vue({
        el:'#app8',
        data:{
            message:"h23abc"
        },
        filters:{
            capitalize:function(value){
                if(!value) return '';
                value = value.toString();
                //用来检索特定索引下的字符的String实例
                //英文字符转换为大写字母
                //从已有的数组中返回选定的元素
                return value.charAt(0).toUpperCase() + value.slice(1);
            }
        }
    });
</script>