vue
框架监听数据
js 版本开发版本
min 版压缩版
导入vuejs
引入vue方式 导入在script src="地址"
在vue里调用其他函数需要使用 this.函数名() v-html指定 把内容显示到元素中 可以解析html标签 checkbox使用数组[] :value='1' 数字 value='1' 字符串 <body> <div id="app">根标签 <h1>{{mymsg}}</h1>vue相关指令 </div> </body> let myvue=new Vue({ el:"#app",每个josn之间逗号隔开 表示监控的是哪个标签 data:{ mymsg:"abc123"; } }); {{差值表达式}} K带$符号 差值表达式只写入文本 v-html 写入标签 v-html="mysmsg2" myvue.$data.mymsg='xxxx';改值 Object.defineProperty(myObj,"b",{ get(){ }, set(){ } }) v-bind:value="textDefault" data:{ textDefault:"jack", } 更改数据直接找元素数据即可 myvue.textDefault="rose"; 更改src 图片 直接 v-bind:src="imgsrc" imgsrc:"jpg" 控制按钮 v-bind:disabled="btnStatus" btnStatus:true, 如果用的是v-bind可以简写成:属性 找元素属性 使用v-bind:绑定更改 v-if="boolean" boolean:true 直接注释掉 控制元素在不在 v-if="可以写判断" v-else-if="可以写判断" v-else="可以写判断" v-show="boolean" boolean:true 将样式属性改为none v-on:click="myClick()"简写---->@click="myClick()" let myVue = new Vue({ el:"#app", data:{ }, methods:{ myClick:function(){ 简化-->myClick(){} 对匿名函数的简化 console.log(this); this.btnStatus=true; vue里面调用函数 this.函数名 } } });
双向绑定
type="radio" 单选 v-model="xxx" v-model="gender" value="1" 男 v-model="gender" value="2" 女 {{gender}}差数表达式 选项值会自动映射绑定到数据上 data:{ gender:"xx"--->value值 }, type="checkbox" 多选 v-model="hobby" value="1"吃 v-model="hobby" value="2"喝 v-model="hobby" value="3"赌 此展示的为字符串"1","3","2" 可使用绑定方法 v-model="hobby" :value="1"吃 此展示的为数字 1,2 v-model="hobby" :value="2"喝 data:{ 使用数组表达 hobby:["2","3"] hobby:["xxx","xxx"] }, v-for="news in newsList" {{news.nesContent}} 遍历元素