快速学习Vue笔记（day 2)
指令和模板
指令
指令是特殊的自定义行间属性
指令职责就是当其表达式的值改变时相应的将某些行为应用到DOM上
在Vue中，指令以v-开头
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js" charset="utf-8"></script>
</head>
<body>
<div id="demo">
<span v-bind:customId='id'>{{message}}</span>
</div>
<script type="text/javascript">
// 数据
let obj = {
message:"hello vue",
id:'123'
}
// 声明式渲染
var vm = new Vue({
el:"#demo",
data:obj
});
</script>
</body>
</html>其中的v-bind就是一种内置指令，他用处为动态绑定数据。
Vue中的内置指令
- v-bind: 动态的绑定数据。简写为:
- v-on: 绑定指定事件监听器，简写为@
- v-text: 更新数据，会覆盖已有结构
- v-heml: 可以解析数据中的html结构
- v-show: 根据值的真假，切换元素的display属性
- v-if: 根据值得真假，切换元素会被销毁、重建
- v-else-if: 多条件判断，为真则渲染
- v-else: 条件不符合渲染
- v-for: 给予源数据多次渲染元素或者模板块
- v-model: 在表单空间元素上创建双向数据绑定
- v-pre: 跳过元素和子元素的编译过程
- v-once: 只渲染一次，随后数据更新不重新渲染
- v-cloak: 隐藏未编译的Mustache语法，css中设置[v-cloak]{display:none}
具体用法官网有具体例子
模板
html模板
基于DOM的模板，模板都是可以解析的有效的html
插值
希望把我们的数据结合页面，需要用到插值
- 文本插值：使用
Mostache语法(双大括号){{value}}
- 作用：转换实例上的属性值，当值改变时，插值内容出会自动更新
- 原生的html：双大括号输出的是文本，不会解析html，如果需要解析html，使用v-html指令。
- 属性：使用v-bind进行绑定，可以相应变化
- 使用JavaScript表达式：写简单表达式
字符串模板
template选项对象的属性
模板会替换挂载元素，挂载元素的内容会被忽略
根节点只能有一个
将heml结构写在一对script标签中，设置’type=’x-template’
render函数
render 选项对象的属性
createElement(标签名,[数据对象],子元素);
数据对象属性如下：
- class:{}, 绑定class，和
v-bind:class一样的API - style:{}, 绑定样式，和
v-bind:style一样的API - attrs:{}, 添加行间属性
- domProps:{}, DOM元素属性
- on:{} 绑定事件
- nativeOn{}, 监听原生事件
- directives:{} 自定义指令
- scopedSlots:{} slot作用域
- slot:{} 定义slot名称
- key:”key” 给元素添加唯一标示
- ref:”ref” 引用信息
扫一扫
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
