教你学习Vue-1(vue命令)
最近因为需要重构APP项目,对比了react和vue,加上前期react开发的经验,还是想试试vue,这是更小更方便的开发方式。1.vue初始化安装官网提供的npm方法$npminstallvue#全局安装vue-cli$npminstall--globalvue-cli#根据webpack模板新建项目$vueinitwebpackmy-project#安装依赖,goyou$cdmy-project$npmrundev2.第一次进入Vue-demosite:{{site}}
url:{{url}}
{{details()}}
3.Vue-js指令数据数据显示使用{{}}当我们给一个被观察对象添加新的属性比如props或者data时,不能直接添加,必须使用Vue.set方法。Vue.set方法用于添加对象的属性。vue-html模板命令不是字符串模板渲染,所以需要使用vue-html来渲染dom
v-bindHTML属性值中应该使用v-bind指令(缩写形式:tile='XXXX')。属性v-bind:title='我是标题属性'v-ifv-elsev-else-if条件判断语句v-show简单语句,带缓存,如果是多次操作,建议使用v-show一般而言,v-if的切换成本较高,而v-show的初始渲染成本较高。因此,如果您需要频繁切换,则v-show更好,如果条件在运行时更改的可能性较小,则v-if更好。v-on绑定事件缩写@click:{{functionName()}}v-for循环迭代for-inv-model是用在表单控件上实现双向数据绑定的,所以如果除了表单标签之外还使用它除控件外没有任何效果。4.Vue.js计算属性
原始字符串:{{message}}
计算后的反转字符串:{{reversedMessage}}
我们可以使用方法而不是计算,两者在效果上是一样的,但是computed是基于它的依赖缓存,只有相关的依赖发生变化才会重新取值。使用方法,在重新渲染时总是会再次调用该函数。详见5.Vue.js监听器属性