艾辰做网站,深圳网站开发外包哪家好,设计实例网站,目前引流最好的app一、准备工作
首先下载vue2的JavaScript库#xff0c;并且命名为vue.min.js
下载链接#xff1a;https://cdn.jsdelivr.net/npm/vue2#xff08;若链接失效可去vue官网寻找#xff09; CTRLS即可下载保存
文件目录结构 二、使用操作原生DOM与使用VUE操作DOM的便捷性比较…一、准备工作
首先下载vue2的JavaScript库并且命名为vue.min.js
下载链接https://cdn.jsdelivr.net/npm/vue2若链接失效可去vue官网寻找 CTRLS即可下载保存
文件目录结构 二、使用操作原生DOM与使用VUE操作DOM的便捷性比较
操作原生DOM
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapp/divscriptlet value 这是内容document.getElementById(app).textContent valuevalue 这是新的内容document.getElementById(app).textContent value/script
/body/html
使用VUE操作DOM
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapp!-- 1.2插值表达式 --p{{title}}/pp{{content}}/pp{{123}}/pp{{12?对:错}}/p/divscript src./vue.min.js/scriptscript//1、响应式数据与插值表达式const vm new Vue({el: #app,data() {return {title: 这是标题文本,content: 这是内容文本}}})/script/body/html
三、其它使用VUE操作DOM的技巧
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapp!-- 1.2插值表达式 --p{{title}}/pp{{content}}/p!-- p{{123}}/pp{{12?对:错}}/pp{{output()}}/pp{{output()}}/pp{{output()}}/pp{{outputContent}}/pp{{outputContent}}/pp{{outputContent}}/p --!--4、指令 --!-- 内容指令 --!-- p v-texttitle123/pp v-htmlcontent123/p --!-- p v-texthtmlContent123/pp v-htmlhtmlContent123/p --!-- 渲染指令 --!-- p v-for(item,key,index) in arr这是内容{{item}}-{{key}}/pp v-for(item,key,index) in obj这是内容{{item}}-{{key}}-{{index}}/p p v-iffalse标签内容/pp v-showbool标签内容/p --!-- 属性指令 --!-- p v-bind:titletitle标签内容/pp :titletitle标签内容/p --!-- 事件指令 --//下面这行是属性指令!-- button v-on:clickoutput按钮/button --!-- button clickoutput按钮/button --!-- 表单指令v-model可以实现双向数据绑定 --input typetext v-modelinputValuep v-textinputValue/p!-- 5、修饰符 --input typetext v-model.triminputValue/div/divscript src./vue.min.js/scriptscript//1、响应式数据与插值表达式const vm new Vue({el: #app,data() {return {title: 这是标题文本,content: 这是内容文本,htmlContent: 这是一个spanspan/span标签,arr: [a, b, c, d],obj: { a: 10, b: 20, c: 30 },bool: true,inputValue: 默认内容}},//1.3methods属性methods: {output() {console.log(methods执行了)return 标题为 this.title , 内容为 this.content}},//2、计算属性具有缓存性computed: {outputContent() {console.log(computed执行了)return 标题为 this.title , 内容为 this.content}},//3、侦听器watch: {title(newVal, oldVal) {console.log(newVal, oldVal)}}})/script/body/html
