上一篇总结了一些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 从入门到精通(二)的更多相关文章

  1. iOS开发-UI 从入门到精通(二)

    iOS开发-UI 从入门到精通(二)是对 iOS开发-UI 从入门到精通(一)知识点的巩固,主要以习题练习为主,增强实战经验,为以后做开发打下坚实的基础! ※开发环境和注意事项: 1.前期iOS-UI ...

  2. Python基本语法,python入门到精通[二]

    在上一篇博客Windows搭建python开发环境,python入门到精通[一]我们已经在自己的windows电脑上搭建好了python的开发环境,这篇博客呢我就开始学习一下Python的基本语法.现 ...

  3. PHP从入门到精通(二)

     PHP从入门到精通 之PHP中的函数 各位开发者朋友大家好,自上次更新PHP的相关知识,得到了大家的广泛支持.PHP的火爆程度不言而喻,函数作为PHP中极为重要的部分,应诸位的支持,博主继续跟进更新 ...

  4. MyBatis从入门到精通(二):MyBatis XML方式的基本用法之Select

    最近在读刘增辉老师所著的<MyBatis从入门到精通>一书,很有收获,于是将自己学习的过程以博客形式输出,如有错误,欢迎指正,如帮助到你,不胜荣幸! 1. 明确需求 书中提到的需求是一个基 ...

  5. vue 从入门到精通(一)

    很早之前就想开一系列有关vue的博客,奈何太忙了,哈哈(爱信不信)...刚刚收到消息vue2.5发布了,哎!还是应该加快一下步伐,要不就与社会脱节了.这次采用小步慢跑的形式一点一点总结vue,第一篇先 ...

  6. SpringBoot从入门到精通二(SpringBoot整合myBatis的两种方式)

    前言 通过上一章的学习,我们已经对SpringBoot有简单的入门,接下来我们深入学习一下SpringBoot,我们知道任何一个网站的数据大多数都是动态的,也就是说数据是从数据库提取出来的,而非静态数 ...

  7. python入门到精通[二]:基础学习(1)

    摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...

  8. MyBatis 入门到精通(二) SQL语句映射XML文件

    MyBatis 真正强大之处就在这些映射语句,也就是它的魔力所在.对于它的强大功能,SQL 映射文件的配置却非常简单. 如果您比较SQL 映射文件配置与JDBC 代码,您很快可以发现,使用SQL 映射 ...

  9. Atom编辑器入门到精通(二) 插件的安装和管理

    在本节中我们会学习如果安装和使用插件插件是Atom中一个非常重要的组成部分,很多功能都是以插件形式存在的.比如上篇文章中提到的目录树和设置等窗口都是通过默认安装的插件来实现的. 查看已安装的插件 打开 ...

随机推荐

  1. 201521123096《Java程序设计》第十四周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  2. delphi cxrid设置column靠左显示

    1.双击cxgrid控件,选中要设置的column 2.找到properties,将column设置为Textedit,点击左边的加号 3.点击ALignment->Horz选中taleftJu ...

  3. 【漏洞公告】CVE-2017-12615/CVE-2017-12616:Tomcat信息泄漏和远程代码执行漏洞

    2017年9月19日,Apache Tomcat官方确认并修复了两个高危漏洞,漏洞CVE编号:CVE-2017-12615和CVE-2017-12616,该漏洞受影响版本为7.0-7.80之间,在一定 ...

  4. JavaScript 基本语法结构

    1 变量 JavaScript的变量是弱类型的,就是所有的对象都是使用var 来进行声明 2 变量的命名规则 1.由字母.数字.下划线组成,区分大小写 2.以字母开头 3.变量名不能有空格 4.不能使 ...

  5. PYTHON 函数局部变量和全局变量

    有这样一段PYTHON代码,从事C语言开发的人都知道,如果定义了全局变量,而函数内没有定义同名的函数变量的话,那么在函数内对该变量的赋值就是对全局变量空间数值的修改, 然后在PYTHON中却不尽相同, ...

  6. 集成Mybatis

    本文根据个人喜好记录"腾讯课堂"的<Java项目之Maven+SpringMVC+Spring+Mybatis+MySql消费查询系统>视频教程关键步骤信息,视频地址: ...

  7. Day4 装饰器——迭代器——生成器

    一 装饰器 1.1 函数对象 一 函数是第一类对象,即函数可以当作数据传递 #1 可以被引用 #2 可以当作参数传递 #3 返回值可以是函数 #3 可以当作容器类型的元素 二 利用该特性,优雅的取代多 ...

  8. String的replace和replaceAll

    replace(CharSequence target, CharSequence replacement) 这里CharSequence是一个接口 实现类包括CharBuffer, Segement ...

  9. ThinkPHP中,display和assign用法详解

    thinkphp 模板显示display和assign的用法 $this->assign('name',$value); //在 Action 类里面使用 assign 方法对模板变量赋值,无论 ...

  10. 【JVM命令系列】jstack

    jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项"-J-d64",Windows的jstack使 ...