vuejs项目不支持IE8及以下版本
一、项目搭建
cnpm install --global vue-cli
vue init webpack my-project
cd my-project
cnpm install
npm run dev
二、基础知识
1）生命周期
new Vue() ——>beforeCreate——>created——>beforeMount——>mounted——>beforeUpdate——>updated——>beforeDestroy——>destroyed
2）计算属性
计算属性是用来处理复杂的逻辑，与方法相比不同的是计算属性是基于他们的依赖进行缓存的
3）用key管理可复用的元素
4）组件传值
prop向下传值
事件向上传值
5）dom模板解析注意事项
<ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。
<table> <my-row></my-row>
</table>
//这样会报错,table标签里面只能插入特定标签
//变通的方案是使用特殊的is特性
<table> <tr is="my-row"></tr> </table>
三、vuejs过渡
1）css过渡
<transition name="xxx"> //xxx过渡组件的名字
<p v-if="show">hello</p> //要过渡的组件或者元素，包裹在transition标签里
</transition> .xxx-enter-active, .xxx-leave-active { transition: opacity 0.5s } .xxx-enter, .xxx-leave-to { opacity: 0 }
2）css动画
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
</transition>
</div>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
3.规范总结
必须执行
1）Prop 定义应该尽量详细，命名使用camelCase。
props:{
status:String //为props指定数据类型
}
2）为v-for设置键值
3）避免v-if和v-for同时用在同一个元素上
4）为组件设置作用域
5）在插件，混入等扩展中始终为自定义的私有属性使用$前缀
6）单文件组件名始终是单词大写开头
7）基础组件应该以一个特定的前缀开头，比如Base,App,V
8）模板命名使用 kebab-case 方式
9）从根App.vue组件导入自定义的全局独立样式
<style src="./styles/global.less" lang="less"></style>