2、指令和模板
来源:互联网 发布:默纳克调试软件下载 编辑:程序博客网 时间:2024/05/16 03:35
title: 2、指令和模板
date: 2017-07-26 09:19:40
tags: vue笔记
指令
什么是指令
指令是一种特殊的自定义行间属性,指令的职责就是当其表达式的值改变时,响应的将某些行为应用到DOM上,在Vue中,指令以v-
开头。以v-bind
指令为例:
<div id="app"> <!--v-bind是指令,作用是动态的绑定数据,简写为':',id是它的参数--> <span v-bind:id="{{ id }}">{{ message }}</span></div>
var vm = new Vue({ el: '#app', data: { message: 'hello,Vue!', id:'123' }})
还有很多常用指令可以查看官网的API。
模板
Vue中有三种模板可以使用,html模板、字符串模板(template)、render函数。
html模板
基于DOM的模板,只要是有效的可解析的html就可以。
html模板的插值
插值就是写在 { {} }
内部的内容。有以下四种情况可以使用:
文本:就是
{ {key} }
,替换实例上的data里的属性值,插值内容会自动更新。原生的html: 上面
{ {} }
输出的是文本,不会解析html,如果在data中有html: '<div>hello Vue</div>'
这样的数据,直接{ {html} }
只会将其当做文本而不是html元素。如果需要被当做dom渲染,需要在父元素设置v-html="html"
。行内的属性:使用
v-bind
进行绑定,可以响应变化。使用javascript表达式:
{ {} }
内部可以写简单的表达式(不要写复杂语句),可以写比如{ { true?'yes':'noe' } }
或者{ {'data'+message} }
,如果复杂的就写到计算属性中去。
字符串模板(template)
template是Vue实例中的选项的一个属性。
模板将会替换挂载的元素,挂载元素的内容都将被忽略,根节点只能有一个,也可以将html结构写在一对<script>
标签中,设置type="X-template"
字符串的方式
替换挂载元素:
<div id="demo1"> <span>hi Vue</span></div>
var str = '<span>{{ message ]}}</span>'new Vue({ el: '#demo1', data:{ message: 'hello Vue' }, template:str})
最终页面会显示hello Vue,会将新渲染的字符串模板替换掉原来的元素
需要注意的是:根节点只能有一个,var str = '<span>{ {message} }</span><span>11</span>'
这种写法是错误的,因为最外层的根节点只能是一个。只能去包含别的元素,比如var str = '<span>{ {message} }<span>11</span></span>'
这样就是对的。
script标签的方式
这种模板也可以写在<script>
标签中,就和平时用的模板文件是相同的。
<script type="X-template" id="temp"> <span> {{ message }} <span>11<span> </span></script>
new Vue({ el: '#demo1', data:{ message: 'hello Vue' }, template: '#temp'})
render函数
render是Vue实例中的属性,在写组件会经常使用。
通过上面字符串方式创建的元素不会直接放到页面上,而是要通过render函数编辑,虚拟DOM树到真实DOM树就是通过render实现的。
render函数需要传入createElement
参数,用这个参数创建模板并return。createElement
也是一个方法。
第一个参数是要创建模板的根元素。
第二个参数是可选参数,表示该根元素上的属性,这里的属性遵循的是指令的规则而不是普通DOM中的写法。其中类名是class
、样式属性是style
、自定义属性是attrs
、绑定事件时on
、dom元素属性是domProps
。其中dom元素属性不是标签里的属性,而是元素对象身上的。就好比length一样。
第三个参数是数组,数组的元素是模板中的子元素。同样使用createElement
创建。
var vm = new Vue({ el: '#demo', data: { class: true }, render: function(createElement){ return createElement( 'ul', // 根元素 { class: { // 这里的属性是遵循v-bind:class而不是dom中的那种class。 bg: true // 添加class名为bg }, style: { // 设置行内样式,也是和v-bind:style一样的 fontSize: '50px' }, attrs: { // 设置自定义属性 abc: 'miaov' }, domProps: { innerHTML: '<li>我是html</li>' // 这里创建了innerHTML相当于是ul.innerHTML='<li>我是html</li>',下面数组里的那些就会被覆盖了 }, on: { // 这里绑定事件,和v-on是一样的 } }, [ // 子元素写在数组里, createElement('li',1), createElement('li',2), createElement('li',3) ] ) }})
- 2、指令和模板
- vue 指令和模板
- AngularJS 使用绑定和模板指令
- 如何利用和扩展cms/email模板中的指令
- AngularJS学习笔记——指令之使用绑定和模板指令
- 动态模板道指令
- AngularJS自定义指令模板
- 【FreeMarker】【模板文件FTL】模板指令/标签 <#> <@>
- Angular 2 FromControlDirective指令和FromGroupDirective指令的使用
- 理解 T4 模板:<#@ parameter #> 指令
- vue笔记--模板语法--指令
- FreeMarker模板引擎常用指令
- Angualr中自定义指令模板
- C++模板(2) - 模板和静态变量
- page指令、include指令和forward指令
- 指令、伪指令和宏指令
- 逻辑运算指令和移位指令
- 逻辑运算指令和移位指令
- 《锋利的jQuery》七、jQuery和Ajax的应用
- 算法入门——简化版桶排序
- BIND9的架构与机制笔记1
- 《锋利的jQuery》十、jQuery插件的写法
- 1、创建Vue实例
- 2、指令和模板
- 6、列表渲染
- 深入机器学习系列2-SVM
- 3、计算属性
- hibernate 注解详解
- 4、class与style
- 位图概念
- 《锋利的jQuery》八、XMLHttpRequest对象
- maven连接国内仓库setting设置