-
开发环境
vue cli插件
查看全部 -
<div v-for="item in list1"> <div v-if="item.age>30" :class="{'active':true}" <!--添加class名为active--> :> {{item.name}} </div> <div v-else> {{item.age}} </div> </div> </div> <script> var app=new Vue({ el:'.app', data:{ msg:'hello vue!', styleMsg:{ color:'red', 'text-shadow':'0 0 5px #232323'//有横线的要用单引号框起来 }, list:[1,2,3,4,5], list1:[ { name:'xiaozhang', age:32 }, { name:'liming', age:22 } ],查看全部 -
//模板语法 var att='test' var app=new Vue({ el:'.app',//绑定方式，这里采用id绑定 data:{ //data为给vue这个对象所使用到页面上的数据 msg:'hello vue!', another:'another', test:'000' }, method:{ }, watch:{//监听(通常监听一个变量或者一个数组) msg:function (newval,oldval) {//当msg值有变化时执行 console.log('newval is:'+newval) console.log('oldval is:'+oldval) } }, computed:{//数据联动(可以监听很多变量，但是这些变量一定要是在本实例里的) //msg1当所涉及到的本对象内部变量改变时，才会重新写 msg1:function(){ return 'compute:'+this.msg+','+this.another+att } }查看全部 -
<body> <div class="bg"> hello world {{msg}} <!--用双括弧包住变量可显示在此模块,若出现多个相同绑定， 则只显示在第一个绑定模块中；若只有一个绑定，绑定模块中所有变量均可显示--> </div> <script> new Vue({ el:'.bg',//绑定方式，这里采用class绑定 data:{ //data为给vue这个对象所使用到页面上的数据 msg:'hello vue!' } }) </script>查看全部 -
启动运行项目
查看全部 -
创建vue-工程项目
查看全部 -
class 绑定
后边可以是一个对象，对象的值可以是js的判断
也可以是一个数组，添加多个class
查看全部 -
style绑定
<div v-bind:></div>
或
<div v-bind:></div>
<script>
new Vue({
data:{
style：{
color:'red',
textShadow:'0 0 5px green' //驼峰式
}
}
})
</scritpt>
查看全部 -
computed & watch
查看全部 -
源码 https://github.com/kanlidy/vue-lessons-demo
查看全部 -
1312321321321
查看全部 -
开发工作流
查看全部 -
testtesttesttest
查看全部 -
计算属性：computed
侦听器：watch
查看全部 -
vue知识架构
查看全部
举报
0/150
提交
取消