Vue入门心得

**

Vue入门**

1，首先Vue它是通过数据的双向绑定，数据流来传递数据的。

2，它有很多的语法和语法糖，比如v-on , v-if , v-for , v-text==={{}},v-bind,v-model,v-show，v-html

v-html和v-text的区别：

•特别注意的是v-model是用在表单,,

3，在Vue里有一个重要的思想就是组件化，每一个可视化界面甚至小到一个按钮都可以用组件来构建，它可以充分的得到复用。

4，组件的定义分两种：
1全局注册：
Vue.component(“你定义的组件名称”，{
template:你要定义的模板})
我们也可以从父作用域传数据到子组件，用到 prop:

我们也可以用v-bind===:,来进行内容的绑定，如：
<todo-item
v-for=”item in grocerylist”
v-bind:todo=”item”
v-bind:key=”item.id”>

Vue.component(‘todo-item”,{
Props:[‘todo’],
Template:’

• {{todo.text}}
• }
  )

  Var app= new Vue({ //实例化一个Vue对象
  el:’#id’ , //html里对应的id
  data:{
  grocerylist:[
  {id:0 ,text:’蔬菜’},
  {id:1,text:’奶酪’},
  {id:2,text:’其他人吃的东西’}
  ]
  }
  })
  结果：
  
  局部注册：
  
  
  
  5，插槽：挺好用也挺常用。
  
  •keep-alive:可以让第一次创建的组件被保存下来。

  6.异步组件：
  我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。例如
  
  
  加载状态：
  

  ·通过 v-once 创建低开销的静态组件
  渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 v-once 特性以确保这些内容只计算一次然后缓存起来，就像这样：
  
  7，动画过渡：
  
  
  对于动画过渡来说我们有必要了解生命周期钩子：
  
  
  
  
  8，渲染函数；
  渲染函数在vue里是重点。
  
  重点推荐
  1， 路由https://router.vuejs.org/zh/
  2， 推荐用一下vue-cli可以偷一下懒Webpack可以自动配置
  3， VueX状态管理

  后序更新