初识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请求数据,安装依赖,布局列表页面,用请求的数据渲染页面
vue学习心得
最新推荐文章于 2023-12-28 14:47:37 发布