vue 从入门到精通(二)
2017-10-25 20:37
316 查看
上一篇总结了一些vue的理论知识,如果你没看懂的话……那返回去继续去看啊!反正我要开始第二篇了。
vue提供了大量的指令,比如:v-if,v-bind,v-on……太多,多写项目,多看API,这里就不多说。
1、vue 的三种模块
html模板:就是基于DOM的一些有效的html标签,如:
<div id="app"> <input type="text" v-model="content"> <span>{{content}}</span> </div>
字符串模板:
如下,先定义字符串模板,然后在vue 的选项对象里面利用template绑定。字符串模板的优先级会比html模板高,如果html和字符串模板中都有内容,会用字符串模板里的内容替换html模板。
需要注意的是定义的字符串模板中根节点只能有一个。还有字符串用 ` 引起来是可以换行的(功能键1旁边的那个键)。
let data = { content: 'world', dataId: '145' } var str = `<div> 你好!{{content}}</div>` var vm = new Vue({ el: '#app', data: data, template: str })
除了用变量定义模板字符串,还可以用script标签,给script 标签定义Id,如下:
<script type="x-template" id="temp"> <div>你好!{{content}}</div> </script> <script> let data = { content: 'world' } var vm = new Vue({ el: '#app', data: data, template: "#temp" })
reder函数模板:更加接近编译器。
render(createElement){ "元素名称", { 属性:{ 属性值:true }, class:{ fontClass:true }, style:{ color:red }, domProps:{ innerHTML:"<li>我是html<li>" //当domProps和createElement都要子元素时,以domProps为主。 } }, [ createElement("li",1), createElement("li",2), createElement("li",3) ] }
相关文章推荐
- Vue.js 入门到精通
- Vue.js笔记,从入门到精通
- vue 2 仿IOS 滚轮选择器 从入门到精通 (一)
- 【备忘】Vue从入门到精通视频教程
- 推荐学习Vue的博客,质量很高,入门到精通
- vue 从入门到精通(一)
- Vue.js 入门到精通
- GPU 编程入门到精通(五)之 GPU 程序优化进阶
- 西门子S7-300 PLC从入门到精通
- Swift应用案例 2.闭包入门到精通
- Vue.js快速入门
- (清华大学HTML+CSS+JavaScript入门到精通学习笔记)第二章 HTML基础
- DataStage从入门到精通实践视频教程【免费更新】
- vue.js移动端app实战3:从一个购物车入门vue
- MySql从入门到精通
- 浅析JAVA学习从入门到精通
- mybatis 入门到精通(二)
- XSL/XML网页制作入门,入门到精通
- 程序员从入门到精通
- Atom编辑器入门到精通(七) 编辑配置文件