vue入门:(模板语法与指令)

vuejs使用及HTML的模板语法,可以实现声明式将DOM绑定至底层VUE实例的数据。通过模板语法将数据渲染进DOM的系统,结合响应系统,在应用状态改变时,Vue能够计算出重新渲染组件的最小代价并应用到DOM操作上。

VUE的模板语法的内容包括:插值、指令。

插值包括:文本插值、原始HTML插值、特性插值、以及使用javascript表达式实现插值。

指令:参数、动态参数、修饰符。

缩写形式是指v-bind和v-on指定可以采用缩写形式:'v-bind:'-->‘:’、'v-on'-->'@'。

 一、vue模板语法之插值

  • 文本插值
  • 原始HTML插值
  • 特性插值
  • javascript表达式实现插值
1.1文本插值:{{}}
1 <div id="user">{{userName}}</div>
2 <script>
3 new Vue({
4     el:'#user',
5     data:{
6         userName:'他乡踏雪'
7     }
8 });
9 </script>

渲染结果:

<div id="user">他乡踏雪</div>
单次绑定:v-once

v-once单次渲染指令,只渲染元素和组件一次,随后的重新渲染,元素/组件及所有的子节点将被视为静态并跳过。这可以用于优化性能。

<!--v-once单次渲染-->
<span v-once>{{sex}}</span>
1.2原始HTML插值:v-html、v-text
 1 <div id="user" v-html="dataHtml"></div>
 2 <script>
 3 new Vue({
 4     el:'#user',
 5     data:{
 6         userName:'他乡踏雪',
 7         dataHtml:'<div><span>昵称:</span><span>他乡踏雪</span></div><div><span>职业:</span><span>前端开发工程师</span></div>'
 8     }
 9 });
10 </script>

渲染结果:

 1 <div id="user">
 2 <div>
 3 <span>昵称:</span>
 4 <span>他乡踏雪</span>
 5 </div>
 6 <div>
 7 <span>职业:</span>
 8 <span>前端开发工程师</span>
 9 </div>
10 </div>

这里的v-html和v-text同等与element.innerHTML和element.innerText的效果。但是这两个指令不能复合局部模板,就是说不能在数据中再插入模板语法,比如“<span>{{userName}}</span>”这个段v-html数据中的复合插入userName不会生效(v-text一样不生效)。

在vue官方文档中提到,需要谨慎使用v-html指令,不要对用户提供的内容执行v-html指令,因为很容易引发XSS攻击。

1.3特性插值:v-bind指令以及简写
 1 <div id="user" v-bind:class="className">{{userName}}</div>
 2 <script>
 3     new Vue({
 4         el:'#user',
 5         data:{
 6             userName:'他乡踏雪',
 7             className:'userWarpper aaa'
 8         }
 9     });
10 </script>

渲染结果:

<div id="user" class="userWarrper">他乡踏雪</div>

v-bind可以省略不写,比如示例中的代码可以写成:class="userName",关于元素特性插值需要重点关注的是比如class多个值怎么插入,又比如style行间的样式特性值又怎么插入。这一块是个独立的内容,后面独立分析。

1.4JavaScript表达式实现插值
1 <div id="user">{{userName + '~丹'}}</div>
2 <script>
3     new Vue({
4         el:'#user',
5         data:{
6             userName:'他乡踏雪'
7         }
8     });
9 </script>

渲染结果:

<div id="user">他乡踏雪~丹</div>

这里说的JavaScript表达式插值不是说在js代码中,而是可以将js表达式插入到HTML中,这些表达式会在所属vue实例的数据作用域下被识别作为javascript被解析,但是只能包含单个表达式,所以下面的例子不会生效

1 <!--这样的JavaScript表达式不会生效-->
2 <div>{{var userName = "他乡踏雪"}}</div>
3 <div>{{if(true){ return message }}}</div>

所以注意,三目运算可以有效执行,链式调用方法可以有效执行。

1 //可以被有效执行
2 {{ true ? 'YES' : 'NO' }}
3 {{ message.split('').reverse().join('') }}

二、指令之参数与修饰符

  • 参数
  • 动态参数
  • 修饰符

 vuejs内置指令集:https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

<a id="vueLink" v-bind:href="url">VUE</a>
<script>
    new Vue({
        el:'#vueLink',
        data:{
            url:'https://cn.vuejs.org/'
        }
    });
</script>

这部分暂时不关注渲染结果,这里我们需要关注指令表达式的结构,例如:v-bind:href="url"。v-bind可以响应式的更新HTML特性,再表达式中的url随这个数据的更新迭代,与数据绑定的DOM实体就会更新特性的属性值,通常这个数据在指令表达式中被称为“参数”。

 1 <a id="vueLink" v-bind:[h]="url">VUE</a>
 2 <script>
 3     new Vue({
 4         el:'#vueLink',
 5         data:{
 6             h:'href',
 7             url:'https://cn.vuejs.org/'
 8         }
 9     });
10 </script>

从上一个示例到这个示例唯一发生改变的就是HTML特性href被[h]替换了,这个就是“动态参数”,也就是说在指令表达式中,指令的特性是可配置的,这个指令特性除了可以配置,同样事件指令v-on也是可以配置的,例如:

 1 <a id="vuebut" v-on:[eventname]="changeName">点击输出:{{userName}}</a>
 2 <script>
 3     new Vue({
 4         el:'#vuebut',
 5         data:{
 6             userName:'他乡踏雪',
 7             eventname:'click'
 8         },
 9         methods:{
10             changeName(){
11                 console.log("他乡踏雪");
12             }
13         }
14     });

动态参数使用起来比较的简单,但是需要注意的是动态参数不能使用大写字母,这个小问题一定注意,我刚刚学习使用vue时被这个问题困扰好久,网上的文档都没有相关解答,或许是因为这不是一个标准写法,所以大家在开发中还是严格按照规范的开发文档来实现避免错误。

然后就是关于修饰,先来看一个示例:

 1 <div onclick="changeName()">
 2     <a id="vuebut" v-on:[eventname].stop="changeName">点击输出:{{userName}}</a>
 3 </div>
 4 
 5 <script>
 6     new Vue({
 7         el:'#vuebut',
 8         data:{
 9             userName:'他乡踏雪',
10             eventname:'click'
11         },
12         methods:{
13             changeName(){
14                 console.log("他乡踏雪");
15             }
16         }
17     });
18     function changeName(){
19         console.log("我是div");
20     }
21 </script>

通过添加在指令表达式上添加stop修饰符,div上的点击事件就不会被触发,实现了阻止冒泡,同等与jQuery中的event.stopPropagation()方法。关于指令修饰符还有很多不同的修饰符,在后面的相关内容中再详细解析。

所谓指令修饰符就是在指令属性后面添加一个后缀,应用指令用于特殊绑定。

 

posted @ 2019-06-06 22:58  他乡踏雪  阅读(716)  评论(0编辑  收藏  举报