2.Vue.js培训

1、Vue.js培训2018简要介绍后端只给前端提供数据,前端负责HTML渲染和用户交互。前后端分离数据双向绑定采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。Vue.js是一个用于创建用户界面的开源JavaScript框架JavaScript框架准备工作 Vue官网上下载 js文件： script src=第一个Demo message var vm = new Vue( el: #app, data: message: Hello Vue.js! ) 1.条

2、件判断(v-if) 现在你看到我了 菜鸟教程 学的不仅是技术，更是梦想！ 哈哈哈，打字辛苦啊！ var vm=new Vue( el: #app, data: seen: true, ok: true )2.循环语句(v-for) 2.1.迭代数组 var vm=new Vue( el: #app, data: sites: name: Runoob , name: Google , name: Taobao ) 2.2 迭代对象 value var vm=new Vue( el: #app, data: object: name: 菜鸟教程, url: http:/, s

3、logan: 学的不仅是技术，更是梦想！ )3.计算属性 原始字符串: message 计算后反转字符串: reversedMessage var vm = new Vue( el: #app, data: message: Runoob! , computed: / 计算属性的 getter reversedMessage: function () / this 指向 vm 实例 return this.message.split().reverse().join() )4.监听属性 watch,来响应数据的变化 var vm=new Vue(.); vm.$watch(kilometers

4、, function (newValue, oldValue) /. )5.样式绑定.active width: 100px; height: 100px; background: green; .text-danger background: red; var vm=new Vue( el: #app, data: isActive: true, hasError: true )6.事件处理器(v-on) Greet var app = new Vue( / 在 methods 对象中定义方法 methods: greet: function (event) / this 在方法里指当前 V

5、ue 实例 alert(Hello + + !) / event 是原生 DOM 事件 if (event) alert(event.target.tagName) )7.表单 (1).输入框 new Vue( el: #app, data: message: Runoob ) (2). 单选 与 多选 单个复选框： checked 多个复选框： Runoob Google taobao 选择的值为: checkedNames new Vue( el: #app, data: checked : false, checkedNames: )8.组件 注册一个全局组件语法格式

6、如下： Vponent(tagName, options)例子如下： / 注册Vponent(runoob, template: 自定义组件!)/ 创建根实例new Vue( el: #app) prop 是父组件用来传递数据的一个自定义属性： / 注册Vponent(child, / 声明 props props: message, / 同样也可以在 vm 实例中像 this.message 这样使用 template: message )/ 创建根实例new Vue( el: #app)9.Vue生命周期中mounted和created的区别 created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 var vm=new Vue( el:#formId, created：function()/初始化执行方法 , mounted:func