研究网站建设,城市建设与管理网站,做网站推广,fw可以做网站Vue简介
Vue是一个Javascript框架Vue框架可以简化Dom操作响应式数据驱动 #xff1a; 页面是由数据生成的#xff0c;当数据出现改动#xff0c;页面也会即时改变
第一个Vue程序
Vue中文文档官网#xff1a;https://v2.cn.vuejs.org/v2/guide/ 根据官方文档的说法#…Vue简介
Vue是一个Javascript框架Vue框架可以简化Dom操作响应式数据驱动 页面是由数据生成的当数据出现改动页面也会即时改变
第一个Vue程序
Vue中文文档官网https://v2.cn.vuejs.org/v2/guide/ 根据官方文档的说法创建第一个简单的Vue程序需要三步 1、导入Vue.js文件
script src../js/vue.js/script2、在html部分中写入如下内容
div idapp{{ message }}
/div3、在js部分中写入
var app new Vue({el: #app,data: {message: Hello Vue!}
})第一个Vue程序就完成了。
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue基础/title/headbodydiv idapp{{ message }}/div
/body
script src../js/vue.js/script
scriptvar app new Vue({el: #app,data: {message: Hello Vue!}})
/script/html页面成功被渲染了出来。
el挂载点
Vue实例的作用范围是什么呢 是否可以使用其他的选择器 {{ message }}div idapp{{ message }}/div当我们在div上方写入{{message}} 可以发现{{message}}被渲染了上去并不是Hello Vue 说明Vue实例的作用范围是el命中的元素内部。
body{{ message }}div classapp{{ message }}/div
/body
script src../js/vue.js/script
scriptvar app new Vue({el: .app,data: {message: Hello Vue!}})
/script如果把id改成classel挂载的点为.app 页面依然渲染了出来说明其他的选择器也支持在el挂载点上。
data数据对象
Vue中用到的数据定义在data中data中可以写复杂类型的数据渲染复杂类型数据时遵守js的语法
bodydiv idapp{{ message }}h2{{school.name}}{{school.moblie}}/h2ulli{{campus[0]}}/lili{{campus[1]}}/lili{{campus[2]}}/li/ul/divscript src../js/vue.js/scriptscriptvar app new Vue({el: #app,data: {message: 你好,school: {name: xiaofu,moblie: 123456,},campus: [数组1, 数组2, 数组3]},})/script
/body本地应用
v-text
设置标签的文本值(textContent)
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlev-text/title/headbodydiv idapph2 v-textmessage/h2h2 v-textinfo/h2/divscript src../js/vue.js/scriptscriptvar app new Vue({el: #app,data: {message: Hello Vue!!!!,info: 随便写的}})/script
/body/html注意 如果要进行部分替换使用{{}} v-text会全部覆盖标签的内容无论标签内是说明内容
默认写法会替换全部内容使用差值表达式{{}}可以替换指定内容
v-html
作用设置标签的innerHTML
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlev-html/title/headbodydiv idappp v-htmlcontent/pp v-textcontent/p/divscript src../js/vue.js/scriptscriptvar app new Vue({el: #app,data: {content: a hrefhttps://www.csdn.net/123123/a}})/script
/body/htmlv-html的作用 注意 设置标签的innerHTML 内容中有html结构会被解析为标签 v-text指令无论内容是什么只会解析文本 解析文本使用v-text需要解析html结构使用v-html
v-on
为元素绑定事件
v-on:事件绑定 事件绑定
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlev-on/title/headbodydiv idappbutton v-on:clickdoIt点击/buttonbutton clickdoIt点击/button/divscript src../js/vue.js/scriptscriptvar app new Vue({el: #app,data: {message: Hello Vue!},methods: {doIt: function () {alert(111)}}})/script
/body/html作用 v-on 指令的作用是为元素绑定事件 事件名不需要写on 指令可以简写为 绑定的方法定义在methods属性中
v-show
根据表达值的真假切换元素的显示和隐藏广告、遮罩层
v-show“true”
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue基础/title/headbodydiv idappbutton clickchangeIsShow点我切换显示/buttondiv v-showisShow styleheight:100px;width:100px;background-color:yellow;/div/divscript src../js/vue.js/scriptscriptvar app new Vue({el: #app,data: {isShow: false,},methods: {changeIsShow: function () {this.isShow !this.isShow}}})/script
/body/html点击后 作用 v-show指令的作用是根据真假切换元素的显示状态 原理是修改元素的display实现显示隐藏 指令后面的内容最终都会解析为布尔值 值为true元素显示值为false元素隐藏
v-if
根据表达式的真假切换元素的显示和隐藏操纵dom元素
v-if“true”
与v-show的区别 v-show操作的是样式而v-if操作的是dom树
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue基础/title/headbodydiv idappbutton clicktoggleIsShow切换显示/buttonp v-ifisShow12314124/p/divscript src../js/vue.js/scriptscriptvar app new Vue({el: #app,data: {isShow: false},methods: {toggleIsShow: function () {this.isShow !this.isShow}}})/script
/body/html点击后 作用 v-if指令的作用是根据表达式的真假切换元素的显示状态 本质是通过操作dom元素来切换显示状态 表达式的值为true元素存在于dom树中为false从dom树中移除
