vuejs学习总结---基础篇

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>