vue知识点总结1

一些vue的琐碎但重要的知识点总结：
1.如何让css只在当前组件起作用？
<style scoped>
2.<keep-alive></keep-alive>是什么？
保存组件的动态状态，使得它的状态不会因为页面的更新而改变，比如说音乐软件的最近播放就是它的杰作
3.v－for：数据循环，比如说你要做一个轮播图或者循环播放一段东西，可以v－for一个对象，这个对象里面包裹你想要循环的数据，图片也好，内容也罢
4.v-bind:class :绑定一个属性或者class
可以使用这个方法进行一个动态切换class，比如你为你的class绑定了两种状态，一种是correct，一种是error，那么你可以在computed里面设置correct的时候return this.correct；error的时候返回this.error，也可以使用它进行动态绑定styles，只不过关键词从class换成了styles
5.v－loader？
v-loader其实就只是vue文件的一个加载器罢了
它的用途很简单粗暴就是你可以使用它书写es6，scss,less这些东西
官方文档里说vue-loader是webpack中的一个loader，用来处理.vue文件
6.key是什么东西？经常看到v－for里面书写key和items这两个关键词
如果我们要解释key的话我们先要稍微了解一下diff算法这个东西
diff算法其实就是vue和react框架背后的高人，它使得我们可以不用直接操作dom元素，只要操作数据便可以重新渲染页面，非常的方便
diff的两大原理：
1.两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构
2.同一层级的一组节点，他们可以通过唯一的id进行区分
如果我们不使用key的话，diff算法执行加入新的元素，比如说我们想再b和c中加入一个新的元素f，那么diff的算法就是把c变成f，，d变成c，后面的也慢慢随之改变非常的没有效率
所以我们需要key来给每一个节点做一个唯一的标识，提高效率，所以key的作用是高效更新虚拟的dom
第二个用处就是当vue使用相同标签想要过渡切换的时候，使用key属性为了使vue区分他们，不然vue只会更换标签，不会产生过渡效果
7.v-model,讲一下这个是什么
v-model指令是在表单元素上进行一个双向绑定，比如<input>,<textarea>,<select>这种元素上，其实他的本质就是一个语法糖，监听用户的输入事件然后更新数据

比如text和textarea使用value和input属性
checkbox和radio使用checked和change
select将value作为prop将change作为事件

8.scss的使用和安装

第一步：先把它下载下来
如果要在终端上下载的话
npm install node-sass —save-dev
npm install sass-loader —save-dev
npm install style-loader —save-dev

第二步：
把你的webpack.base.config.js改一下

module改成这样子
module: { 
　　　　rules: [ 
　　　　　　　　　　{ 
　　　　　　　　　　　　test: /\.vue$/, 
　　　　　　　　　　　　loader: 'vue-loader', 
　　　　　　　　　　　　options: vueLoaderConfig
　　　　　　　　　　}, 
　　　　　　　　　　{ 
　　　　　　　　　　　　test: /\.js$/, 
　　　　　　　　　　　　loader: 'babel-loader', 
　　　　　　　　　　　　include: [resolve('src'), 
　　　　　　　　　　　　resolve('test')] 
　　　　　　　　　　}, 
　　　　　　　　　　{
　　　　　　　　　　　　 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
　　　　　　　　　　　　 loader: 'url-loader', 
　　　　　　　　　　　　 options: { 
　　　　　　　　　　　　　　　　limit: 10000,
　　　　　　　　　　　　　　　  name: utils.assetsPath('img/[name].[hash:7].[ext]')
                             } 
                 }, 
　　　　　　　　　　{ 
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                    loader: 'url-loader', 
                   options: { 
                               limit: 10000, 
                               name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                            } 
                   }, 
　　　　　　　　　　{ //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别sass! 
                     test: /\.scss$/,
                     loaders: ["style", "css", "sass"]
                  } 
               ] 
           }

第三步：
在你需要使用scss的script上加上他
<style lang=“scss”>
9.vue的transition
动画效果，可以绑定transition事件，transform的形状，具体可参考css3官方文档