2.Vue.js培训.pptxVIP

Vue.js培训;;准备工作;第一个Demo;1.条件判断(v-if);2.循环语句(v-for);2.2 迭代对象 div id=appul li v-for=value in object {{ value }} /li /ul/div script var vm=new Vue({ el: #app, data: { object: { name: 菜鸟教程, url: , slogan: 学的不仅是技术，更是梦想！ } } }) /script;3.计算属性;4.监听属性 watch,来响应数据的变化;5.样式绑定;6.事件处理器(v-on) ;7.表单;(2). 单选 与 多选 div id=app p单个复选框：/p input type=checkbox id=checkbox v-model=checked label for=checkbox{{ checked }}/label p多个复选框：/p input type=checkbox id=runoob value=Runoob v-model=checkedNames label for=runoobRunoob/label input type=checkbox id=google value=Google v-model=checkedNames label for=googleGoogle/label input type=checkbox id=taobao value=Taobao v-model=checkedNames label for=taobaotaobao/label br span选择的值为: {{ checkedNames }}/span /div script new Vue({ el: #app, data: { checked : false, checkedNames: [] } }) /script;8.组件;prop 是父组件用来传递数据的一个自定义属性： div id=app child message=hello!/child /div script // 注册 Vponent(child, { // 声明 props props: [message], // 同样也可以在 vm 实例中像 this.message 这样使用 template: span{{ message }}/span }) // 创建根实例 new Vue({ el: #app }) /script;9.Vue生命周期中mounted和created的区别;Thankyou