一般什么情况下使用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()
]
