讨论Vue.js的组件和模板

时间：2021-09-03 来源：互联网编辑：宝哥软件园浏览：次

摘要：

指令是Vue.js中的一个重要特性，它主要提供了一种将数据变化映射到DOM行为的机制。然后，数据的变化映射到DOM行为，Vue.js是由数据驱动的，所以我们不会直接修改DOM结构，也不会有$('ul ')这样的操作。追加(' lione/li ')。当数据发生变化时，指令会用一个set操作来修改DOM，这样我们就只能关注数据的变化，而不能管理DOM的变化和状态。

Vue的内置说明

1.垂直装订

V-bind主要用于绑定DOM元素属性，

也就是说，元素属性的实际值由vm实例中的数据属性提供。

例如：

！title vue/title script src=' http : '的doctype html lang=' en ' head meta charset=' utf-8 '指令./vue . js '/脚本/头体！- HTML模板-div id=' demo ' span v-bind : cuto mid=' id“{ message } }/span/div script//data letobj={ message 3360 ' hello world '，id 3360 ' 123 ' }；//声明式呈现varvm=newvue ({el:' # demo '，data : obj })；/script/body/htmlv-bind可以缩写为“:”。

上面的例子可以缩写为span :cotomId='id '

效果如下：

2.v-on

绑定事件侦听器，缩写为@。

我们昨天用的。让我们写下来，看看效果

！title vue/title script src=' http : '的doctype html lang=' en ' head meta charset=' utf-8 '指令./vue . js '/脚本/头体！- HTML模板-div id=' demo ' span @ click=' click handle ' { message } }/span/div script//data letobj={ message : ' hello WUE ' }；//声明性呈现varvm=newvue ({el:' # demo '，data: obj，methods : { click handle(){ alert(' click ')} })；/script/body/html的效果如下：

3.v-html

V-html，参数类型为字符串，

功能是更新innerHTML。

接受的字符串将不会被编译，

像普通的超文本标记语言一样处理

代码如下

！title vue/title script src=' http : '的doctype html lang=' en ' head meta charset=' utf-8 '指令./vue . js '/脚本/头体！-html模板-div id=' demo ' v-html=' html '/div script//data letobj={ html 3360 ' div hello world/div ' }；var VM=newvue ({el:' # demo '，data : obj })/script/body/html的效果如下

更多内置说明请查看官网：Vue.js说明

模板

Html模板

基于DOM的模板，模板是可解析且有效的html

插入文字

文本：使用“小胡子”语法(双括号){{value}}

函数：替换实例上的属性值。

当值改变时，插值内容将自动更新

原生html:双大括号输出文本，html不会被解析

属性：用v-bind绑定可以响应变化

使用JavaScript表达式：您可以编写简单的表达式

字符串模板

模板字符串

模板选项对象的属性

模板将替换悬挂元素。挂在元素上的任何东西都将被忽略。

代码如下

！doctype html lang=' en ' head meta charset=' utf-8 ' title模板/title脚本src=' http :/vue . js '/脚本/头体！- HTML模板-div id=' demo '/div script//data letobj={ HTML 3360 ' div string/div '，ABC 33601 }；var str=' DivHello/div '；Varvm=newvue ({el:' # demo '，data: obj，template 3360 str })/script/body/html，有没有发现什么惊人的变化

只能有一个根节点

在一对脚本标签中编写html结构，并设置类型='X-template '

！doctype html lang=' en ' head meta charset=' utf-8 ' title模板/title脚本src=' http :/vue . js '/脚本/头体！- HTML模板-div id=' demo' spanvue/span/div脚本类型=' x-temp ' id=' temp ' div hello，{{ABC}}，span Sunday/span/div/script script//data letobj={ HTML : ' div string/div '，var vm=new Vue({ el:'#demo '，data:obj，template : ' # temp ' })；/script/body/html实现效果如下：

用脚本标签写作仍然受到限制。

如果其他文件具有相同的结构，

这个不能重复使用。

模板渲染功能

渲染功能

渲染选项对象的属性

CreateElement(标记名，{data object}，[子元素])；

子元素是文本或数组

让我们做一个代码演示

！doctype html lang=' en ' head metacarset=' utf-8 ' title render函数/titlescriptsrc=' http:/vue . js '/script style type=' text/CSS '。BG { background3360 # ee0000}/style/head body div id=' demo '/div script//data let obj={ }；Varvm=newvue ({el:' # demo '，data: obj，render(create element){ return create element(//元素名称' ul '，//数据对象{class:{ bg:true}}，//子元素[createelement ('Li '，1)，createelement ('Li '，2)，createelement ('Li '，3)]；} }) /script/body/html实现了以下结果