其实我是看过书的,但是没有敲代码,而且vue真的太方便了!!所以感觉学起来还挺舒服的,今天主要是进行一些基础的学习:
vue是一套用于构建用户界面(用vue往html页面中填充数据)的前端框架,框架是一套现成的解决方案。程序员只能遵守框架的规范,去编自己的节业务功能。
学习vue就是学习vue框架中规定的用法。比如学习vue的指令、组件(是对UI结构的服用)、路由、Vuex、Vue的组件库;只有把这些都掌握,才有开发vue项目的能力。首先我们对它进行基本的了解
vue特性:
数据驱动视图:是单向的数据绑定,但是当页面数据发生变化时,页面会自动重新渲染,不用再去操作DOM;
双向数据绑定:在网页中form表单负责采集数据,Ajax负责提交数据。不再需要手动操作dom元素来获取表单元素最新的值。js数据的变化会被自动渲染到页面上,页面上表单采集的数据发生变化的时候,会被vue自动获取到并更新到js数据中。
MVVM:model指的是当前页面渲染时所依赖的数据源;view表示当前页面所渲染的dom结构;viewmodal表示vue的实例,他是MVVM的核心,是他把数据源和页面的结构连接在了一起。
写一个vue为框架的html流程:
- 导入vue.js的script脚本文件;
- 在页面中声明一个将要被vue所控制的dom区域;
- 创建vm实例对象
指令的概念:是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构
指令的分类:内容渲染指令;属性绑定指令;事件绑定指令;双向绑定指令;条件渲染指令;列表渲染指令
一、内容渲染指令:辅助开发者渲染dom元素的文本内容,常有的有三个:
- v-text:就是把它的(data里的name的)值渲染到标签里,会覆盖原有标签的内容,比如<p v-text='sex'>性别</p>,这时data里面的sex的值会覆盖性别,只显示值
- {{}}语法,叫插值表达式,专门解决内容覆盖默认文本内容的问题。在实际开发中用的最多,知识内容的占位符,不会覆盖原有的内容。!只能用在内容节点,不能用在属性节点
- v-html:如果要把包含html标签的内容渲染出来,要用到这个,能把有标签的字符串渲染成真正的html内容
注意:dom区域最好不要传标签,有多个指定标签名的时候会只渲染第一个标签,所以要在外面包裹一个div
二、属性绑定指令:v-bind可以为元素的属性动态绑定值,这个指令可以简写成 " : "
在使用v-bind属性绑定期间,如果绑定的内容需要进行动态的拼接,则字符串外面需要包裹单引号
使用js表达式:在vue提供的模板语法中,除了支持简单的数据绑定,还支持js 语法
三、事件绑定指令:v-on,辅助为dom元素绑定事件监听;简写为@
替换onclick等事件为@click,@keyup等
不传参会默认有个e,如果传参了,事件对象会被传的参数覆盖掉,vue提供了内置变量,名字叫$event,他就是原生dom事件的对象;
按键修饰符 用法@keyup.enter=""
e.preventDefault提供一个@click.prevent,有绑定又有阻止默认行为。
- .prevent 阻止默认行为
- .stop 阻止事件冒泡 e.stopPropagation
- .capture 以捕获模式触发当前的事件处理函数
- .once 绑定的事件只触发一次
- .self 只有在event.target是当前元素自身时的事件处理函数
四、双向数据绑定:在不操作dom的前提下,获取表单的内容
v-bind是单向绑定,数据改变他改变,但是他不能改变数据本身
v-model是双向绑定,改变会互相影响 ,可以改变数据,数据也可以改变他,下图效果:
一般用v-model的场景:1.input输入框,2.textarea 3.select
v-model修饰符:
- .number将输入值自动转化为数值类型
- .trim自动过滤用户输入的首尾空白字符
- .lazy在"change"时而非"input"时更新
五、条件渲染指令:用来辅助开发者按需控制dom的显示与隐藏
v-if 和 v-show:
v-if如果是false相当于删除,true再创建;如果刚进入页面某些元素默认不需要被展示,而且后期也可能不需要被展示出来,这时候v-if性能好
v-show是false就是dispaly:none给隐藏起来;频繁切换性能好
v-if也可以和v-else-if v-else等一起用,跟if-else if-else一样
六、列表渲染指令,基于一个数组来循环渲染一个列表结构
v-for:这里的item和index不光子元素可以访问,父元素本身也可以访问。
<tbody>
<!-- 这里的item和index不光子元素可以访问,tr本身也可以访问 -->
<tr v-for="(item,index) in list" :key="item.id">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
官方建议只要用到v-for一定要绑定一个:key属性,而且尽量把id作为key的值,key值只能是字符串或数字类型,并且不允许重复;使用index的值当作key的值没有任何意义,因为index值不具有唯一性(只要顺序变了或者传入新值索引就会变),和每项之间没有强制绑定关系
label的for属性:for指向id,动态绑定id,用'重复部分'+item.id
<tr v-for="(item,index) in list" :key="item.id">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
元素删除:remove方法:用filter方法把要删除的过滤掉
this.list.filter(item=>item.id!==id)
添加元素:给文本框v-model.trim绑定一下,去除空格,from表单提交会自动刷新网页,因为form表单有submit事件,@submit.prevent='add',
数组尾部添加调用.push
往表单中添加项的逻辑:
- 先把添加的品牌对象整理出来
- 往this.list数组中push步骤一中得到的对象
- 清空this.brand,让this.nextId自增1
过滤器:
只有vue2及以前的版本能用,用于文本的格式化,定义到filters节点下,本质是个函数。
应用场景:插值表达式和v-bind属性绑定。过滤器添加在js表达式的尾部 | 表示调用过滤器,过滤器中一定要有一个返回值,调用时以过滤器的值为优先项,要拿到过滤器前面的原值只需要加一个形参
私有过滤器和全局过滤器:
定义到vue示例中的过滤器都是私有过滤器,也叫局部过滤器。
全局过滤器:
Vue.filter('capi',str=>{})
两个参数,第一个参数是名字,第二个参数是处理函数
如果全局过滤器和私有过滤器名字一致,此时按照就近原则,调用的是私有过滤器
dayjs插件,安装后导入文件就可以使用dayjs()方法,直接可以调用得到当前时间,带参数调用得到指定时间dayjs(time).format(YYYY-MM-DD HH-mm-ss)
过滤器的其他用法:
- 1.连续调用过滤器item.time | dateFormat | aa | bb;前面一个过滤器处理的结果作为下一个过滤器的形参,得到最后一个过滤器调用过的结果。
- 本质是js函数,因为可以接收参数
message | dateFormat(arg1,arg2)
过滤器处理函数的形参列表中,第一个参数永远都是管道符前面待处理的值,第二个函数开始,才是调用过滤器传递过来的arg1和arg2的值,接收函数要从第二个开始接收
Vue.filter('dateFormat',(msg,arg1,arg2)=>{}
webpack四个现代化:模块化 组件化 规范化 自动化
侦听器:监视data里面的数据变化
watch侦听器:允许开发者监视数据的变化,从而针对数据的变化做一些设置;
- 方法格式侦听器:无法再刚进入页面的时候自动触发一次;如果侦听的是一个对象,对象中的属性改变了,不会触发对象的侦听器
username(newVal,oldVal){ console.log(newVal,oldVal) }
- 对象侦听器:可以通过immediate选项,让侦听器自动触发;可以通过deep选项让侦听器深度监听对象中每个属性的变化
username:{ handler(newVal,oldVal){ console.log(newVal,oldVal) }, //默认值false,控制侦听器是否自动触发一次 immediate:true, //默认值false,用于监听对象里属性的变化 deep:true },
计算属性:指的是通过一系列计算之后,最终得到一个属性值,这个动态计算出来的属性值可以被模板结构或methods方法使用
计算属性写在computed里面,定义时候写成方法格式,调用时候用属性方法调用,任何一个属性变了都会重新求值
computed:{
rgb(){
return `rgb(${this.r},${this.g},${this.b})`
}
}
axios:是一个只专注于网络请求的库,导入库文件就可以直接用了
基本语法:
axios:({
method:'',
url:'',
//url中的查询参数,get请求用params
params:{},
//请求体参数,post传参一般用data
data:{}
}).then(result=>{})
调用axios方法的返回值是个Promise对象。axios给原本的数据封装了一下
如果调用某个方法的返回值是Promise实例,则前面可以添加await,只能用在被async修饰的方法中
解构赋值的时候用 :进行重命名
- 1.调用axios之后,使用async/await进行简化
- 2.使用解构赋值,从axios封装的大对象中,把data属性结构出来
- 3.把结构出来的data属性用:进行重命名,一般重命名为{data:res}
还有.get 和.post .delete属性,与上述基本语法一致,只是method不用写出来了
axios.get('url',{params:{}})
axios.post('url',{name:'zs',sex:'female'})
还有老师讲的找数据的原理非常的清晰,分享给大家~来源:b站黑马程序员