搜索
1Vue.js语法整理一、基础语法newVue({el:#app,data:{message:HelloVue!}})1）el表示在html中哪个部分起作用，类似节点选择器；2）data中定义了页面需要的数据，键值对；现在来“驱动”视图，body标签里面加入：divid=app{{message}}/div二、事件divid=app{{message}}buttonv-on:click=changeMessage改变message/button/div1）v-是指令2）v-on是绑定事件，可以简写成@click3)传参数的事件方法事件修饰器!--阻止点击事件的冒泡行为--av-on:click.stop=doThis/a!--阻止默认的表单提交--formv-on:submit.prevent=onSubmit/form!--事件修饰器可以连用--av-on:click.stop.prevent=doThat!--只需要修饰器，而无需处理方法--formv-on:submit.prevent/form!--使用capture模式--2divv-on:click.capture=doThis.../div!--仅当event.target是自身的时候才执行--!--比如，这样写了之后点击子元素就不会执行后续逻辑--divv-on:click.self=doThat.../div三、双向绑定divid=appp{{message}}/pinputv-model=message/div1）v-model是用在表单中的指令2）双向绑定：都是指的是类似input这样的，自带change事件的表单项目3）p标签中的message发生了变化，input的value的变化改变了message，从而使视图发生了相应的变化。四、循环olliv-for=todointodos{{todo.text}}/li/ol1)带有key，index，value的完整版循环修饰器方法push()//在结尾增加一条或多条数据pop()//删除最后一条数据shift()//删除第一条数据，并返回这条数据unshift()//在开始增加一条或多条数据，并返回数组长度splice()//向/从数组中添加/删除项目，然后返回被删除的项目。sort()//对数组的元素进行排序。reverse()//颠倒数组中元素的顺序。filter()//返回条件为真的数据concat()//连接两个或多个数组slice()//从已有的数组中返回选定的元素。五、vm对象varvm=newVue({3el:'#app',data:{message:'HelloVue!'}})console.log(vm.messages)console.log(vm.$data.message)console.log(vm.$data)console.log(vm.$el)六、vue1.0与2.0的生命周期七、过滤器divid=app{{float_number|toInt}}/divnewVue({el:'#app',data:{float_number:3433.45},filters:{toInt:function(value){returnparseInt(value);4}}})八、在{{}}中运行表达式divid=app{{ok?'yes':'no'}}/divscriptsrc=vue.min.js/scriptscriptnewVue({el:'#app',data:{ok:true}})/script它一般表达的是运算关系；如果运算很简单，一次性的，你可以不用filter，而采用这种简短的写法；九、指令v-text=””v-html=””v-on=””十、属性v-binddivid=appdivclass=activev-bind:class={red:isActive}sadasdsad/divdivclass=active:class={red:isActive}sadasdsad/div!--简写方式--/divnewVue({el:'#app',data:{isActive:true,hasError:false5}})1)bind是专门用来绑定html原生属性的2)绑定html已有的属性，比如：class、style、src、href3)可以跟普通的属性共存4)直接绑定一个对象，也可以绑定一个数组十一、修饰器formv-on:submit.prevent=onSubmit/form它们一般都带有一些特殊功能十二、计算属性divid=app{{int_number}}/divscriptsrc=vue.min.js/scriptscriptnewVue({el:'#app',data:{float_number:3433.45},computed:{int_number:function(){returnparseInt(this.float_number);}}})/script1)计算属性是一种更直观，更清晰的表达方式。2)在写表达式很长，或者多行的情况下，都建议使用计算属性3)计算属性作为一种数据属性，它依赖data里面的数据，如果data里面的数据不变，计算属性可以根据data属性源的变化自动缓存4)在数据和运算量庞大的应用里，合理的使用计算属性可以大大提高效率6十三、methoddivid=app{{toInt()}}/divscriptsrc=vue.min.js/scriptscriptnewVue({el:'#app',data:{float_number:3433.45},methods:{toInt:function(){returnparseInt(this.float_number)}}})/script1)用一个方法来代替计算属性，其结果是一模一样的2)而methods里面的方法是每次都会运行一次十四、v-if、v-showdivid=appdivv-if=okv-ifdivdivv-show=okv-showdiv/divnewVue({el:'#app',data:{ok:true}})1)v-if需要渲染dom，因此切换速度上比v-show慢2)v-show的dom需要预先加载，因此初次加载量比v-if大3)如果要频繁切换显示隐藏，就用v-show4)如果要提高整个页面的加载速度，就用v-if7十五、表单绑定divid=appselectv-model=selectedoptionv-for=optioninoptionsv-bind:value=option.value{{option.text}}/option/selectspanSelected:{{selected}}/span/divnewVue({el:#app,data:{selected:'A',options:[{text:'One',value:'A'},{text:'Two',value:'B'},{text:'Three',value:'C'}]}})1)必须要使用v-model才能双向绑定2）Lazy，不同步v-model.lazy=msg3)当选中表单元素时，单选和多项如果没有value是切换true和false，否则会显示value里的值，下拉菜单会显示option里的属性4）自动转化数字，v-model.number=age5）自动去除字符串首尾空格，v-model.trim=msg十六、组件divid=appmy-component/my-component/divVue.component('my-component',{//全局注册template:'divAcustomcomponent!/div'})8varvm=newVue({el:'#app'})----------------------------------------------------------------------------varChild={template:'divAcustomcomponent!/div'}varvm=newVue({el:'#app',components:{'my-component':Child//局部注册}})-------------------------------------------------------------------------------Vue.component('simple-counter',{template:'buttonv-on:click=counter+=1{{counter}}/button',data:function(){return{counter:0}}})newVue({el:'#app'})--------------------------------------------------------------------------------Vue.component('my-component',{props:['myMessage'],template:'span{{myMessage}}/span'})1)Vue组件注册要写在前面，Vue实例初始化要写在后面2)在组件里data的属性一定要return回来3)template里面可以直接使用v-on这样的语句4)组件里面当然可以嵌套的组件，这就形成了父组件和子组件的关系。5）子组件想使用父组件的数据，就需要通过传参数的方式。6）参数往下传，事件往上传7)在html不能用驼峰命名，因为html的属性是区分大小写的8）type参数（StringNumberBooleanFunctionObjectArray）9十七、Vue-loader1)vue-loader可以让你换一种方式来定义组件，它必须配合打包工具webpack来一起使用；2)组件变得完全独立，调用和管理都十分方便3)Webpack是一个模块化的打包工具，它基于node.js4）Webpack广泛的应用在其他的js项目构建中5）把vue组件写成一个一个单独的文件是个绝妙的主意，但是这些文件怎么调用，怎么组合在一起，怎么管理呢？这就要靠Webpack了6）vue-loader是Webpack的一个插件，专门用来管理和打包.vue文件的7）Webpack除了可以把不同文件打包，统一加载外（这就是传说中的模块化开发），还可以对语言进行预编译（jade，es5，sass...）8)stylescoped，加入scoped将只对这个组件有效，而不会影响全局安装vue-cli//全局安装vue-clinpminstall-gvue-cli//初始化一个vue专用的webpack项目vueinitwebpack-simplehello-vue//进入项目目录cdhello-vue//npm安装依赖包npminstall//文件被打包编译，并可在localhost:8080访问npmrundev