vue学习心得

初识Vue (Vue 的核心库只关注视图层) 基础知识点： 1.代码的命名方式及规范 BEM命名方式 .block .block–element .block__modifier oocss方法 =>提高代码的可复用性 Eslint（js书写规范）了解即可 安装 npm i eslint -g npm i eslint-plugin -vue -g npm i eslint --init 2.模板语法 文本语法 {{msg}} data: { // 初始化数据，可以定义很多个，可以定义各种数据类型 msg: ‘hello vue’, } 纯HTML
data: { msg: ’
hello vue
’ } 表达式 {{ sex == 0 ? ‘女’ : ‘男’ }} {{ msg.split(’’).reverse().join(’*’) }} data: { sex: 0, msg: ‘hello vue’ } 指令及简写（其中循环和指令应重点掌握） vue中含有v-前缀的特殊属性 ---- 指令 v-model value值 v-html v-text v-for 遍历循环使用 v-for = “item of/in list” :key=“唯一性的值” v-for = “(item, index) of/in list” :key=“index” v-on 绑定事件 简写 ==>
v-bind 绑定属性(缩写同事件，把@换为:,属性值可以为变量) v-if 条件判断 v-else-if v-else v-show 条件判断 v-if 与 v-show 的区别 v-if 是“真正”的条件渲染， 切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 惰性:条件第一次变为真时，才会开始渲染条件块。 切换开销大。 v-show 不管初始条件是什么，元素总是会被渲染，切换css来实现 初始渲染消耗大。 3.事件处理 事件修饰符 按键修饰符 系统修饰符 表单修饰符 4.计算属性:computed() 依赖 data中的初始值，一般书写为一个函数，返回了一个值 这个值具有依赖性，只有依赖的那个值发生改变，他才会重新计算 特定情况优于方法与侦听 5.侦听属性（watch）：watch：{ Fn(newval,oldval){ console.log(newval + ‘|’ + oldval ) } } 6.VUE的生命周期 及 钩子函数(重点mounted) beforeCreate(){} created(){}, beforeMount(){} mounted(){}, beforeUpdate(){} update(){}, beforeDestroy(){} destroyed(){} activated(){} deactivated(){} 7 fetch数据请求与axios数据请求 mounted(){ Fetch(url).then( res=>res.json() ) .then( data=>{console.log(data)} ) Axios.get(url).then( res => { console.log(res) } ) } Axios会自动将promise对象转换为json对象，但是使用得先安装 8.组件 父子组件 父传子: 1.在调用子组件的地方添加一个自定义属性 属性值为要传递的值 2.在定义子组件的地方添加一个props选项 props:可以为数组或对象 数组:属性名为子组件中props选项为数组时接受的名字 props:[‘class1’，‘class2’,‘class3’] 对象: 验证数据的类型 props:{ class1:String, class2:Number,当属性值为变量时且数据类型为Number或Blooean时, 需用:class绑定 class3:Blooean } 验证数据的类型且设置默认值 props:{ class1:{ //type:String, //default:‘默认值’ type: Object, default: function () { return {} } } } 非父子组件（包括但不限于兄弟组件）
注意:不可写成(当时写的时候坑我半天)
动态组件 动态组件生命周期钩子函数 需求：input输入值之后切换组件后值还存在，但同时只能出现一个input
aaa bbb ccc
活跃 包含（配合name属性） 规定is属性，是不是
9.项目流程 1.使用脚手架创建vue项目 2.抽离页面分成各个组件export defalt暴露组件。引入scss文件库 3.设置路由，根据路由映射出是哪个组件，去渲染页面，用的是路由的懒加载， 节省性能。点击时进入不同的页面，用的是声明跳转， tag将标签转换成li标签有着a标签的功能。 此时标签上会有一个route-like-active属性，选择该属性去书写样式 4.axios请求数据，安装依赖，布局列表页面，用请求的数据渲染页面