vue 从入门到精通(二)
上一篇总结了一些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 从入门到精通(二)的更多相关文章
- iOS开发-UI 从入门到精通(二)
iOS开发-UI 从入门到精通(二)是对 iOS开发-UI 从入门到精通(一)知识点的巩固,主要以习题练习为主,增强实战经验,为以后做开发打下坚实的基础! ※开发环境和注意事项: 1.前期iOS-UI ...
- Python基本语法,python入门到精通[二]
在上一篇博客Windows搭建python开发环境,python入门到精通[一]我们已经在自己的windows电脑上搭建好了python的开发环境,这篇博客呢我就开始学习一下Python的基本语法.现 ...
- PHP从入门到精通(二)
PHP从入门到精通 之PHP中的函数 各位开发者朋友大家好,自上次更新PHP的相关知识,得到了大家的广泛支持.PHP的火爆程度不言而喻,函数作为PHP中极为重要的部分,应诸位的支持,博主继续跟进更新 ...
- MyBatis从入门到精通(二):MyBatis XML方式的基本用法之Select
最近在读刘增辉老师所著的<MyBatis从入门到精通>一书,很有收获,于是将自己学习的过程以博客形式输出,如有错误,欢迎指正,如帮助到你,不胜荣幸! 1. 明确需求 书中提到的需求是一个基 ...
- vue 从入门到精通(一)
很早之前就想开一系列有关vue的博客,奈何太忙了,哈哈(爱信不信)...刚刚收到消息vue2.5发布了,哎!还是应该加快一下步伐,要不就与社会脱节了.这次采用小步慢跑的形式一点一点总结vue,第一篇先 ...
- SpringBoot从入门到精通二(SpringBoot整合myBatis的两种方式)
前言 通过上一章的学习,我们已经对SpringBoot有简单的入门,接下来我们深入学习一下SpringBoot,我们知道任何一个网站的数据大多数都是动态的,也就是说数据是从数据库提取出来的,而非静态数 ...
- python入门到精通[二]:基础学习(1)
摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...
- MyBatis 入门到精通(二) SQL语句映射XML文件
MyBatis 真正强大之处就在这些映射语句,也就是它的魔力所在.对于它的强大功能,SQL 映射文件的配置却非常简单. 如果您比较SQL 映射文件配置与JDBC 代码,您很快可以发现,使用SQL 映射 ...
- Atom编辑器入门到精通(二) 插件的安装和管理
在本节中我们会学习如果安装和使用插件插件是Atom中一个非常重要的组成部分,很多功能都是以插件形式存在的.比如上篇文章中提到的目录树和设置等窗口都是通过默认安装的插件来实现的. 查看已安装的插件 打开 ...
随机推荐
- 201521123042《Java程序设计》第11周学习总结
作业参考文件 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同 ...
- 201521123057《Java程序设计》第14周学习总结
0. 本周课程设计发布 Java课程设计 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 数据库基本操作(目前为止主要介绍了表的基本操作) 创建表 CREATE ...
- webservice第二篇【自定义webservice服务、soa、uddi概念、soap协议】
自定义webservice服务 我们在上一章节中已经使用wsimport生成本地代理来调用webservice的服务了,其实我们自己写的web应用程序也是可以发布webservice的 我们发布了we ...
- Sping IOC
这2天学习了Spring的AOP 其中包括注解式和非注解式的配置 个人感觉注解式的配置非常好用.具体内容如下: 1. AOP 面向切面编程 个人理解就是在一个写好的方法上增加一些新的功能 ...
- JSR303的数据校验-Hibernate Validator方式实现
1.什么是JSR303? JSR303是java为bean数据合法性校验所提供的一个标准规范,叫做Bean Validation. Bean Validation是一个运行时的数据校验框架,在验证之后 ...
- cnblogs第一天
2017-08-25 21:27:16 今天算是真的下定决心要好好的去经营自己的博客了. flag也就不立了,毕竟,flag这种东西立了就是为了打脸的嘛....... 既然说是经营了,那必然是要认认真 ...
- BackTrack 5无线网卡混杂模式设置
用ifconfig查看网络设备 主机无线网卡名称一般为wlan0,USB网卡一般为wlan1 虚拟机中USB网卡一般无法自动识别,可以用ifconfig wlan1 up启用 用ifconfig wl ...
- Java笔记—— 类与对象的几个例子
问题1 按要求编写java应用程序: 编写西游记人物类,属性有:身高,名字和武器.方法有:显示名字,显示武器. 在main方法中创建两个对象.猪八戒和孙悟空,并分别为他们的两个属性名字和武器赋值,最后 ...
- TCP/IP(四)网络层
前言 前面给大家介绍了计算机网络的基本概述,物理层和数据链路层.这一篇给大家介绍面试中经常会被问到的网络层.在介绍之前我们回顾一下之前学习的知识! CP/IP协议栈:物理层.链路层.网络层.传输层.应 ...
- 一个综合实例讲解vue的基础知识点。
本文通过一个简单的实例来讲解一下vue的基本知识点.通过这个综合实例的讲解,vue的基础知识就会掌握的差不多了. 首先看一下项目的效果: