网站开发的业务需求分析,平台推广应用,seo整合营销,易企秀h5长页面制作Vue集成了React和Angular的优点#xff0c;摒弃了他们的缺点。Vue的官网#xff1a;https://cn.vuejs.org/v2/api/Vue诞生于2016年#xff0c;是现在非常流行的MVVM框架。Vue提供了“引包”的使用方法#xff0c;初学者可以在这之下学习语法。不需要webpack#xff0c;不需…Vue集成了React和Angular的优点摒弃了他们的缺点。Vue的官网https://cn.vuejs.org/v2/api/Vue诞生于2016年是现在非常流行的MVVM框架。Vue提供了“引包”的使用方法初学者可以在这之下学习语法。不需要webpack不需CMD打包。Vue的包https://cn.vuejs.org/js/vue.js在react中任何一个组件都是一个class类并且这个类继承于React.Component。当你放标签的时候等于实例化了这个类。Vue也是一样任何一个组件也是一个类但是Vue有个非常大的特点语法隐藏底层细节Vue中的指令都是以v-开头的v-开头的指令里面不用{{ }}一、Vue的基本使用Vue启动在VueTestjslib文件夹下创建vue.js文件将vue官网js文件内容复制进去。在HTML文件中引用vue.js唯一一次用new,Vue的主程序要用new来引入el是element的意思就是挂载点。插入值使用{{ }}!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph1{{11}}/h1/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app}) //实际作用域是id为app的div//唯一一次用new,Vue的主程序要用new来引入/script
/body
/html输出结果2. MVVM特性的演示创建html文件!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph1我爱你{{a}}年/h1button clickadd()按我加1/buttonbutton clickminus()按我减1/button/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{a:100,},methods:{add(){this.a;},minus(){this.a--;}}})/script
/body
/html结果3. 指令React中没有指令指令是Angular发明的Vue借鉴来的。标签身上的属性这些属性有功能性1v-if、v-showv-if是动态的向DOM树内添加或者删除DOM元素是否上树;v-show是通过设置DOM元素的display样式属性控制显隐 v-if和v-show的值都是布尔值true, a9, str.length5 Math.random6v-开头的指令不用{{ }} 用双引号。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappbutton clickchangeisInTree()v-if添加、删除元素/buttonbutton clickchangeisShow()v-show显示、隐藏元素/buttonh1 v-ifisInTree你好/h1h1 v-showisShow你好/h1/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{isInTree:true, //true可见false不可见isShow:true,},methods:{changeisInTree(){this.isInTree!this.isInTree;},changeisShow(){this.isShow!this.isShow;}}})/script
/body
/html结果2) v-fora. 案列一v-for用来实现循环某个节点循环节点必须绑key。v-bind:key!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappulli v-for(item, index) in arr v-bind:keyindex{{index}}-{{item}}/li/ul/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{arr:[A, B, C, D]}})/script
/body
/html结果b. 案列二!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable, tr, td {border: 1px solid black;}td {padding: 10px;}/style
/head
bodydiv idappulli v-for(item, index) in arr v-bind:keyindex{{index}}-{{item}}/li/ultabletr v-foritem in student v-bind:keyitem.idtd{{item.id}}/tdtd{{item.name}}/tdtd{{item.sex}}/tdtd{{item.age}}/td/tr/table/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{arr:[A, B, C, D],student:[{id:1, name:小红, sex: 女, age: 12},{id:2, name:小明, sex: 男, age: 24},{id:3, name:小东, sex: 男, age: 35},]}})/script
/body
/html结果c. 案列三从1开始计数!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappp v-foritem in 5{{item}}/p/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,})/script/body
/html结果d. 案列四从0开始计数!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappulli v-for(item, index) in 5 v-bind:keyindex{{index}}/li/ul/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,})/script
/body
/html结果e案列五九九乘法表!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable, tr, td{border: 1px solid black;}td {padding: 20px;}/style
/head
bodydiv idapptabletr v-fori in 9td v-forj in 9span v-showij{{i}}*{{j}}{{i*j}}/span/td/tr/table/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,})/script
/body
/html结果3v-bind重难点v-bind指令可以让任何w3c属性变“动态”。a. 案列一!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappinput typetext v-bind:valuea/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{a:10,},})/script
/body
/html结果b. 案列二加入两张图p v-fori in 3img :src./i.jpg
/p4v-on 事件监听一般用符号代替v-on:!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappbutton v-on:clickinfo()点击/button/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{},methods:{info(){alert(你好);}}})/script
/body
/html结果5) v-model双向绑定是vue中的特色。Angular也有是vue借鉴来的。双向绑定指的是1当data的值变化了控件就变化。2当控件的值变化了data的值也变化。Vue规定携带v-model指令的元素不能有监听或value了。a. 案列一!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph1{{a}}/h1input typetext v-modela/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{a:10,},methods:{}})/script
/body
/html结果b. 案列二!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph1{{a}}/h1input typerange v-modela/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{a:10,},methods:{}})/script
/body
/html结果案列1调色板!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{width: 200px;height: 200px;border: 1px solid black;}/style
/head
bodydiv idappdiv classbox :stylebackground-color:rgb(r,g,b)/divpinput typerange :min0 :max255 v-modelrbr /input typerange :min0 :max255 v-modelgbr /input typerange :min0 :max255 v-modelb/p/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{r:100,g:175,b:130,},methods:{}})/script
/body
/html结果2微博发布框!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.warning {color:red;}/style
/head
bodydiv idapptextarea cols30 rows10 v-modelcontent/textareaspan :class{warning: content.length 140}{{content.length}}-140字/spanbr / !--json格式--button :disabledcontent.length140 || content.length0发布/buttonbutton :disabledcontent.length0 clickclear()清屏/button/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{content:,},methods:{clear(){this.content ;},}})/script
/body
/html结果3购物车!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapptabletr v-foritem in carts :keyitem.idtd{{item.id}}/tdtd{{item.title}}/tdtd{{item.price}}/tdtdinput typenumber min0 v-modelitem.number{{item.price*item.number}}/td/tr/table总价{{zonghe()}}/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{carts:[{id: 1, title: 冰箱, price: 100, number: 1},{id: 2, title: 电视机, price: 150, number: 2},{id: 3, title: 空调, price: 300, number: 8},{id: 4, title: 电饭煲, price: 50, number: 5},]},methods:{zonghe(){return this.carts.reduce((a,b){return a b.number*b.price}, 0)}}})/script
/body
/html结果4computed小案例1!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph1{{a}}/h1/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{},methods:{},computed:{a:{get(){return 10;}}}})/script
/body
/html结果案例2computed可以有get和setcomputed可以看作特殊的data!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph1{{a}}/h1button clickadd()button/button/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{},methods:{add(){this.a;}},computed:{a:{get(){return 10;},set(){alert(你试图更改a)}}}})/script
/body
/html结果5) todos!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapppinput typetext refkuangbutton clickaddToDo()增加/button/pulli v-foritem in todos v-bind:keyitem.idinput typecheckbox v-modelitem.done{{item.title}}button clickremoveToDo(item.id)删除/button/li/ulp共{{todos.length}}个。已做{{yizuo}}个未作{{weizuo}}个。/p/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{todos:[{id:1, title:睡觉, done: false},{id:2, title:吃饭, done: false},{id:3, title:洗碗, done: false},]},methods:{removeToDo(id){this.todosthis.todos.filter(itemitem.id!id);},addToDo(){var titlethis.$refs.kuang.value;this.todos.push({id:Math.random(),title,done:false})}},computed:{yizuo(){return this.todos.filter(itemitem.done).length;},weizuo(){return this.todos.filter(item!item.done).length;}}})/script
/body
/html结果6一维变二维未结束!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph1要求做3个ul,每个ul中有四个li/h1ul v-fori in 3li v-forj in 4img src/images/${(i-1)*4(j-1)}.jpg alt/li/ul/divscript srcjslib/vue.js/scriptscriptnew Vue({el:#app,data:{},methods:{},computed:{}})/script
/body
/html
