大同推广型网站开发,规划电子商务网站建设方案,开发手机网站的步骤,企业建站业务还能做吗今天开始学习Vue.js啦#xff0c;刚开始看起来#xff0c;确实很难很难#xff0c;但是经过一番“周折”#xff0c;发现也就那样#xff0c;没有想象的那么难。 下面是今天记录的代码#xff1a;
!DOCTYPE html
htmlheadmeta charset刚开始看起来确实很难很难但是经过一番“周折”发现也就那样没有想象的那么难。 下面是今天记录的代码
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/vue.js typetext/javascript charsetutf-8/script/headbodydiv idapph1 v-textnumber/h1h1 v-htmlnumber/h1div v-htmlinfo/divdiv v-textinfo/div/divdiv idapp-2/divdiv idrooth1 v-on:clickhandleClick{{content}}/h1h1 clickhandleClick{{content}}/h1/div!-- 双向绑定 --div idroot1!-- div v-bind:titledell me titlehello word/div --div :titledell me titlehello word/divinput v-modelcontent /div {{content}}/div/div!-- 计算属性 --div idroot3姓input v-modelfistName /br/名input v-modellastName /div{{fullName}}/div!-- 侦听器,监听某一个数据的变化 --div{{count}}/div/div!-- v-if,v-show,v-for指令的用法 --div idroot4div v-ifshow hello word/div!-- div v-showshow hello word/div --button clickheadClicktoggle/buttonul!-- li v-foritem in list:keysitem{{item}}/li --li v-for(item,index) in list:keysindex{{item}}/li/ul/divscript typetext/javascriptvar vm new Vue({el:#app,data:{number:123,info:h1 stylecolor:red这是信息/h1}});var vm2 new Vue({el:#app-2,template:h1{{msg}}/h1,data:{msg:这是template的用法}})var vm3 new Vue({el:#root,data:{content:你好啊},methods:{handleClick:function(){this.content word}}})var vm4 new Vue({el:#root1,data:{title:this is hello word,content:this is content}})var vm5 new Vue({el:#root3,data:{fistName:,lastName:,count:0},/* 计算属性 */computed :{fullName:function(){return this.fistName-this.lastName;}},/* 侦听器 */watch:{fistName:function(){this.count;},lastName:function(){this.count;}}})var vm6 new Vue({el:#root4,data:{show:true,list:[1,2,3,4,5]},methods:{headClick:function(){this.show !this.show;}}})/script/body
/html
