Vue2.0学习
VUE学习
目录
简介
1.两个特性
-
数据驱动视图
数据的变化会导致视图的更新
-
双向数据绑定
数据源变化，视图也会更新
视图中的数据变化也会同步到数据源
3.MVVM
-
什么是mvvm
model view viewmodel
model数据源
view当前页面的dom
vuemodel表示vue的实例可以实现model和view的双向绑定
基本使用
1.基本实例化
- 基本使用
<body>
<div id="app">{{ msg }}</div>
<!-- {{}}可以替换数据 -->
<script>
const vm = new Vue({
el: "#app", //控制哪个dom
data: {
// 使用哪些数据
msg: "hellovue"
}
})
</script>
</body>
- 需要创建一个根div app熟悉这习惯
2.调试
dev tool，谷歌插件
3.指令
1.内容渲染指令
-
指令包含
1.v-text 替换为文本 2.{{}} 替换为文本 3.v-html 可以解析html标签并替换 -
基本使用
<body>
<div id="app">
<p v-text="msg2">嗨嗨</p>
<p >嗨嗨{{msg}}</p>
<p v-html="msg2">嗨嗨</p>
</div>
<!-- {{}}可以替换数据 -->
<script>
const vm = new Vue({
el: "#app", //控制哪个dom
data: {
// 使用哪些数据
msg2:"<h1>hello</h1>"
}
})
</script>
</body>
- 差异对比
1.v-text 和{{}}
将值替代为普通文本
{{}}不会覆盖原有文本
v-text会覆盖原有的文本
2.v-html会解析值的html标签信息
谨慎使用，用户可能用它来进行攻击
2.属性绑定指令
- 指令包含
v-bind:xxx="" 简写为 ：
-
可以在插值和属性中使用
简单的js表达式，
调用函数的返回结果，
进行简单的字符串拼接等等
3.事件绑定指令
- 指令包含
v-on:xxx="" 简写为 @
-
函数的简写
1.可以省略function 2.可以使用箭头函数 methods:{ hello:function(){return 1;}, hello2(){alert(2)}, hello3:()=>alert(3) } -
方法中访问当前对象
1.通过this访问当前对象 2.通过vm，实例化的对象名称访问当前对象 countadd1(){this.count+=1}, countadd2(){vm.count+=2;} -
绑定事件的时候可以选择传递参数，函数定义的时候定义了参数，绑定的时候必须传递参数
-
不传参的情况下默认有个参数为event e
<button @click="countadd(9)">+9</button> countadd(n){this.count+=n}, -
源生事件绑定
源生的dom事件如onclick，oninput，onkeup 将on提前，v-on：click，v-on：input 或者@click，@input -
事件参数event
1.如果没有传入参数，可以使用形参e接受事件目标 <button @click="countadd1">+1</button> countadd1(e){console.log(e)}, 2.如果传入了参数，需要接受源生事件dom参数，需要使用$event <button @click="countadd1($event)">+1</button> countadd1(e){console.log(e)}, 3.使用e.target获取事件的目标 -
事件修饰符
内外层绑定了同名函数 .prevent组织标签默认行为，可以自定义事件 .stop阻止事件冒泡传播 .capture由当前向内冒泡反冒泡 .self只在当前元素触发事件 .once只触发一次 .passive不想阻止事件的默认行为 -
按键修饰符
1.按键码
在按键的时候判断按键是否是某个特殊的键 替代原来的按键码，按键码被摈弃了，新的浏览器不在支持按键码 字母的话有数字组成特定的按键码 .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right2.系统修饰符
在响应键盘和鼠标事件的时候必须同时按下系统按键才响应 .ctrl .alt .shift .meta <!-- Alt + C --> <input v-on:keyup.alt.67="clear"> <!-- Ctrl + Click --> <div v-on:click.ctrl="doSomething">Do something</div>.exact修饰符
需要精准按键，仅仅按下某系统按键的时候才触发鼠标按键修饰符，鼠标左键，中键，右键的点击事件时候触发
.left .right .middle
4.双向绑定指令
-
v-model 在不操纵dom的情况下操纵表单数据
-
v-model内部会判断input的类型，或者从属于哪一种表单元素
-
input，textarea，button等使用v-model，可以操纵值和变量事件
-
value的绑定是单向绑定，数据源变化可以致使视图变化，视图变化不会导致数据变化
-
v-model
input radio，checked都可以 textarea 内容 select option -
v-model的修饰符
.number 自动转换成数字 在字符串拼接时候数字化 .trim 自动去掉两边空白 .lazy 在change更新非input事件更新 比如输入、删除后失去焦点的时候
5.条件渲染指令
-
条件渲染指令v-if和v-show
-
v-if和v-show对比
v-if 默认为false，则不渲染，更省资源 v-show 频繁切换的时候，使用，避免重复渲染 -
v-if的相关if else
v-if v-else v-if v-else-if …… v-else
6.列表渲染指令
-
v-for的基本使用
-
遍历数组
1.遍历数组 <div v-for="it in list"> <p>{{it.id}}-{{it.name}}</p> </div> 2.额外用index获得元素的下标0开始 <div v-for="(it,index) in list"> <p>{{it.id}}-{{it.name}}-{{index+1}}</p> </div> data: { list:[{id:"#1",name:"张三"}, {id:"#2",name:"王五"}, {id:"#3",name:"赵四"},] }, -
遍历对象
可以通过v-for遍历对象 value表示值，name表示键，index表示下标 <div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div> -
v-for的时候可以访问父级区域的数据，根元素的Vue对象的data数据均可访问
-
官方推荐绑定：key
最好是绑定id，在.vue文件中使用v-for不绑定key报错，key只能是字符串或数字
index和key绑定没有意义，因为index和数据不强制绑定
-
数组变更的方法，会双向绑定渲染到v-for
push() pop() shift() unshift() splice() sort() reverse() -
可以结合一些函数，和计算属性，对数据进行筛选等操作
filter()`、`concat()` 和 `slice() -
列表渲染的小操作
1.循环渲染
4.过滤器 侦听器 计算属性
1.过滤器filter
-
基本使用和定义
1.使用 | 过滤符号 加过滤器名进行过滤 2.在filters(和methods同级)里定义过滤器函数 3.过滤器必须需要有返回值 4.过滤器会默认将|前的源数据作为参数，在过滤器函数中可以接受到 {{msg | daxie}} filters:{ daxie(val){ console.log("guolv"+val); return val; } }, -
私有过滤器和全局过滤器
1.基本概念 在vue实例下filters定义的是私有过滤器，不可以被其他vue实例使用 可以使用Vue.filter(name,function)定义注册一个全局过滤器给多个vue实例调用 2.构造 Vue.filter(name,function(val){})接受两个参数，第一个是过滤器的名称，第二个是过滤函数 //可以简写 3.作用域 全局过滤器和私有过滤器重名，根据作用域，就近原则调用私有过滤器 -
过滤器使用
1.可以使用过滤器，格式化一些内容，比如将时间格式化年元日时分秒 2.过滤器可以调用a|b|c,将a过滤b后再传入c再过滤 3.过滤器可以传参数，第一参数位置默认为传入数据源|前的内容 4.Vue3中摒弃了过滤器
2.侦听器watch
-
侦听器的作用
侦听数据的变化 -
基本属性和用法
1.在watch里面定义函数 2.函数名和数据的名称相同 3.有两个参数，一个新值，一个旧值 <div id="app"> <input type="text" v-model="msg"> </div> Vue.config.devtools = true const vm = new Vue({ el: "#app", //控制哪个dom data: { // 使用哪些数据 msg:"hello world" }, watch:{ msg(newval,oldval){ console.log(newval+":"+oldval); } }, }) -
对象形式的侦听器和immediate属性
1.如果需要创建一个刷新页面就处理的侦听器需要使用对象形式创建 2.将immediate属性设置为true就可以刷新页面就进入侦听状态 3.使用immediate，没更新，获得的数据为undefined const vm = new Vue({ el: "#app", //控制哪个dom data: { // 使用哪些数据 msg:"hello world" }, watch:{ msg:{ handler(newval,oldval){ console.log(newval+":"+oldval); console.log("启动了") }, immediate:true } }, }) -
deep深度监听
1.为了方便使用方法定义法，如果需要特殊需求，则使用对象定义法定义watch 2.侦听对象内部的数据变化，深度监听，需要使用对象定义法进行侦听，将对象定义法中的deep属性设置为true watch:{ msg:{ handler(newval,oldval){ console.log(newval); console.log(oldval) }, immediate:true, deep:true } },
3.计算属性computed
-
计算属性作用
1.本质上是一个属性，通过一系列的函数计算获得 2.可以作为vue对象的属性直接使用
5.axios
-
简介
1.用于发起网络请求的库 2.axios的返回值是一个Promise对象 3.后端接口程序返回了一个data是真实数据 4.axios除了真实数据之外套了壳，补充至config，data，headers，request，status，statusText -
基本语法
6.组件
7.vue声明周期
8.组件通信
9.ref操纵dom元素
10.数组方法
11.动态组件
12.插槽
13.自定义指令
14.vue路由
VUE案例
案例1 列表渲染
-
循环渲染中的问题
1.input checkbox等表单元素使用v-model进行双向绑定 2.使用v-if v-else选择渲染动态切换的已启用已禁用的状态，考虑性能选择是否用v-show 3.在插值里写简单的js表达式，不可以写复杂语句，最终是一个值，不要有多条语句 -
动态生成checked
1.使用label 和 label中的for属性绑定input的id，可以扩大复选框的操作区域 2.使用v-for动态生成的时候会出现for绑定重名的情况，需要借用id动态生成for的绑定 label ：for="'cb'+item.id" -
删除操作
1.除了后台，可以使用list+数组filter的方法，传入id并进行判断，重新绑定，进行重渲染，实现删除的效果 -
添加操作
1.可以使用.prevent组织默认行为并写自己定义的行为 2.可以使用return ，终止函数的行为 3.表单的默认提交行为会刷新页面 4.
Vue-cli
创建
- 创建项目过程
使用vue create xxx创建项目
- 进入项目文件夹并启动项目
$ cd demoday01
$ npm run serve
- 浏览器中响应的端口中修改
src目录文件介绍
1.assets 静态资源，如图片等
2.components 封装的组件
3.main.js 项目的入口文件
4.app.vue 根组件，如果需要修改
项目的运行过程
同过main.js将app.vue渲染到html
Webpack
1.基础学习
1.基本使用
创建一个隔行变色的效果
1.新建目录，在目录下按cmd进入命令行，npm init -y命令，初始化配置文件package.json,
2.目录中新建src文件夹，新建一个index.html,index.js
3.初始化页面结构，创建无序列表
4.安装jquery，使用npm install jQuery -S，会安装到dependencies中
5.使用ES6导入jquery
2.安装webpack
-
后缀介绍
-S --save开发阶段和上线都要用
-D --save-dev开发阶段使用仅仅
npmjs.com中查询使用哪个后缀 -
安装命令
使用
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
-
在项目中配置webpack
1.项目根目录中创建webpack.config.js,初始化
module.exports={ //有development和production mode:'development' }2.package.json scripts节点下新建dev可以使用npm run dev
"scripts": { "dev":"webpack" },
浙公网安备 33010602011771号