vue

一般什么情况下使用Vue?

      一般是需要开发SPA应用程序的时候去用，可以使用它开发大型的SPA单页面应用程序。vue是渐进式的，Vue其实可以融入到不同的项目中

Object.defineProperty(user,'age',{ get(){ return 123}, set(){ } } ) 以get得到的值为主

①vue的安装及使用

npm install vue

页面引入vue.js，    <script src='node_modules/vue/dist/vue.js'></script>

var vue1 = new Vue({ el:      data: { }  methods:{ } }) ;

---

②vue条件渲染

当需要按条件控制渲染多个元素的时候，可以把他们都放到template这个特殊的标签中，vue会识别它，在渲染的结果中不会包含template

③自定义指令

什么时候需要封装自定义指令：操作dom的时候封装自定义指令，当你需要进行一些底层dom操作的时候更为方便

3.1. 注册一个全局自定义指令

Vue.directive('focus', {

  // 当被绑定的元素插入到 DOM 中时……

  inserted: function (el) {

    // 聚焦元素

    el.focus()

  }

})

使用这个指令时   ‘v-focus’ 

el 是 根据指定的dom元素的变化而变化 在指令钩子中，函数内部的this是window

3.2 . 局部自定义指令

directives:{

      girlClass: function(){},     // 简写方式：自动应用到 binding 和 update 两个钩子   

                                             //  在渲染的时候要  v-girl-class;

}

directives : {

      girlClass: {

      bind:function(){},

inserted:function(){}

      }

}

④vue中的指令

A. v-cloak <div v-cloak> {{msg}} </div> v-cloak 在编译结束之前不会显示 msg

          使用v-cloak要先加样式  [v-cloak] { display:none; } 当vue解析完dom模板后这个样式会自动去除。

B. v-html    渲染html时如果发现有script标签则不渲染。目的是为了防止XSS攻击

C. vue-if 和 v-show      vue-if 才是真正的条件渲染，false则移除这个dom,  v-show都会渲染,是通过控制样式 display:none;

  v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

D. v-once  被v-once包裹的元素都不会再更新了    <div  v-once> <h1>{{msg}}</h1>  <h2>{{msg}}</h2></div>

E. v-pre    <div  v-pre> <h1>{{msg}}</h1> </div>  原样输出 {{msg}} Vue不处理带有 v-pre指令的DOM元素

⑤ vue的生命周期

A. befordCreate ： 未拿到 el 和 data等

B. created ： 未拿到 el , 拿到了 data 但还未把数据渲染到 dom元素里 , created钩子是最早能拿到data中的数据的钩子

C. beforeMount :  拿到el,拿到了 data 但还未把数据渲染到 dom元素里

D. mounted : 拿到el,拿到了 data 数据已经渲染到 dom元素里

I . errorCaptured  ：钩子级别的错误捕获， 捕获组件中发生的错误

⑥ watch 默认只监视一层，若要让其深度监视需要加

watch：{

    todos: {

          handler: function ( newVal, oldVal) { localStorage.setItem( 'todos', JSON.stringify(val) ) },

          deep : true,

    }

}

⑦vue-router

A. 当你使用路由的时候，需要告诉路由匹配到的组件往哪里渲染 <router-view></router-view>这里渲染

B. 推荐使用 <router-link to='/foo'>go to foo </router-link> 跳转， 默认渲染成 a 链接 <a href='#foo'>go to foo </a>

注意： B.1  也可以通过配置让它渲染成别的属性    <router-link to='/foo'  tag='li' >go to foo </router-link>  等于  <li>go to foo</li>

B.2  点击这个链接标签时会自动添加一个样式类class  router-link-active

B.3  关于自动添加类名，它有一个包含匹配规则，如果一个  /foo      则/ 和 /foo 都会同时加上这个类名  加上exact解决这个包含问题

        <router-link to='/foo'  exact  tag='li' >

C. 配置路由表  var Foo = { template:'<div>'我是Foo</div> }

      var router = new VueRouter( { routes:[ { path:'/foo',component:Foo }, ]} ) 

      new Vue( {el:"" , router})

url传值：  <router-link to=“`/crud/update?id=${item.id}`”>编辑</router-link> 

在/crud/update页面通过  const {id}  =  this.$route.query  拿到route和router  , this.$router访问到的是路由实例对象，this.$route访问到的是路由参数对象

⑧ vue 热更新 （浏览器不刷新也能更新数据）

在webpack.config.js里配置 const webpack = require('webpack')

                                                在 devServer:{  hot:true }

在 Plugins: [ new webpack.NamedModulesPlugin()

  new webpack.HotModuleReplacementPlugin()

]