Vue 01Day Knowledge Point
一.vue是什么？
vue 是一个 渐进式的 javascript 框架！
官网地址: https://cn.vuejs.org/
渐进式：逐渐增强，vue不强求你一次性在网站中运用学习所有的语法，可以学一点用一点
二.什么是MVVMVVM？（MVVM：一种软件架构模式）{重点知识}
1.Vue是一个MVVM的框架
M：model数据模型(ajax获取到的数据)
V：view视图（页面）
VM：ViewModel 视图模型 (操作视图+模型)
MVVM通过 数据双向绑定 让数据自动地双向同步
V（修改视图） -> M（数据自动同步）
M（修改数据） -> V（视图自动同步）
2.原生 和 vue 修改视图的思想分别是什么？
原生：dom驱动，修改视图，操作dom
vue：数据驱动，修改数据，操作数据即可
3.vue组件化思想
组件化：一个组件会包含（HTML+CSS+JS） ，完整的页面可以拆分成多个组件。
组件化的优点：便于维护，便于复用
三.vue脚手架
1.安装vue脚手架
- 全局安装：
npm i @vue/cli -g 或 yarn global add @vue/clinpm i @vue/cli -g 或 yarn global add @vue/cli
查看vue版本：
vue —version 或 vue -Vvue --version 或 vue -V
初始化一个vue项目：
vue create 项目名（不能用中文）vue create 项目名（不能用中文）
选择vue2 回车等待加载完毕
4.进行cd切换到你的文件根目录中
cd 文件名
然后进行npm run serve
cd 文件名然后进行npm run serve
到这里属于自己的脚手架就安装成功了！！！！！！！
可以去vscode打开看看了，将文件夹在编译器打开
打开终端输入npm run serve 运行即可打开默认的脚手架页面
2.脚手架项目里各个文件及代码都有什么作用呢?
目录分析与清理
- public/index.html不用动，提供一个最基础的页面
- src/main.js不用动， 渲染了App.vue组件
- src/App.vue默认有很多的内容，可以全部删除
- assets 文件夹 和 components 直接删除
脚手架里主要文件和作用?
四.vue插值表达式
vue如何提供数据?
1.通过 data 属性可以提供数据， data属性必须是一个函数
2.这个函数需要返回一个对象，这个对象就代表vue提供的数据
<template><div>{{name}}</div></template><script>export default {data(){return{money:100,name:"小明",}}};</script>
插值表达式： 小胡子语法 {{ }}
1.作用: 使用 data 中的数据渲染视图（模板）
2.支持基本语法, 支持三元运算符
3.注意点：
（1）使用数据在 data 中必须存在
（2）能使用表达式，但是不能使用语句 if for …
（3）不能在标签属性中使用 {{ }} 插值
五.vue指令
vue指令: 特殊的 html 标签属性, 特点: v- 开头
1.vue指令 -v-bind
说明：插值表达式不能用在html的属性上，想要动态的设置html元素属性，需要使用v-bind指令
作用： 动态的设置html的标签属性
语法： v-bind:属性名=”值”
简写： :属性名=”值”
2.vue指令 vue-on
作用：注册事件
- 参数：
event
语法：
1.v-on:事件名=“要执行的少量代码”
2.v-on:事件名=“methods中的函数名”
3.v-on:事件名=“methods中的函数名(实参)”
注意：事件处理函数在methods中提供
4.简写：v-on 可以 简写 成 @
注：在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：v-on:click="handle('ok', $event)"
<template><div><h3>金额：{{ money }}</h3><!-- 绑定事件使用v-on指令 --><!-- 语法：v-on:事件名="代码" --><button v-on:click="money = money + 10">加10块钱</button><!-- 简写方式: @事件名="代码" --><!-- 以后统一都采用简写方式 --><button @click="money = money + 10">加10块钱</button><!-- 绑定事件，调用函数 --><!-- 语法：v-on:事件名="函数名" --><!-- 函数声明在methods对象里面 --><button v-on:click="add100">加100块</button><!-- 绑定事件，调用函数，可以传参数 --><!-- 怎么传参数？v-on:事件名="函数名(参数)" --><button v-on:click="addMoney(10)">加10块</button><button v-on:click="addMoney(50)">加50块</button><button v-on:click="addMoney(1000)">加1000块</button></div></template>
<script>export default {data() {return {money: 10,};},// methods对象存放方法（函数）methods: {add100() {console.log("函数执行");// 在函数里引用data里的变量需要使用this来引用// 比如data里的money，this.moneythis.money += 100;},// amount表示传入的金额addMoney(amount) {this.money += amount;},},};</script>
3.vue指令v-show
语法: v-show=”布尔值” (true显示, false隐藏)
原理: 实质是在控制元素的 css 样式, display: none;（ 根据表达式之真假值，切换元素的 display CSS property）
注意，v-show 不支持 元素，也不支持v-else
4.vue指令 v-if
语法: v-if=”布尔值” (true显示, false隐藏)
原理: 实质是在动态的创建 或者 删除元素节点
（ 根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 `，将提出它的内容作为条件块。 ）
注： 当和 v-if 一起使用时，v-for 的优先级比 v-if 更高！！
5.vue-show 和 vue-if 的区别（重点）
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
应用场景:
- 如果是频繁的切换显示隐藏, 用 v-show
- 如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if
- v-show是在控制元素的 css 样式
v-if 是动态的创建 或者 删除元素节点
<template><div><div v-show="age >= 18">成年人的世界</div><div v-show="age < 18">未成年人的世界</div><div v-if="age >= 18">成年人的世界</div><div v-if="age < 18">未成年人的世界</div></div></template><script>export default {name: "App",data() {return {age: 19,};},};</script>
5.vue指令 v-else 和 v-else-if
- 限制：前一兄弟元素必须有
v-if或v-else-if
<template><div><div v-if="age < 18">少儿棒棒糖</div><div v-else-if="age < 28">青年大学习</div><div v-else-if="age < 40">中年工作敲代码</div><div v-else-if="age < 60">老年打麻将</div><div v-else>家和万事兴</div></div></template><script>export default {name: "App",data() {return {age: 18,};},};</script>
6.vue指令 v-model
- 预期：随表单控件类型不同而不同。
- 修饰符：
[.lazy](https://cn.vuejs.org/v2/guide/forms.html#lazy)- 取代input监听change事件[.number](https://cn.vuejs.org/v2/guide/forms.html#number)- 输入字符串转为有效的数字[.trim](https://cn.vuejs.org/v2/guide/forms.html#trim)- 输入首尾空格过滤
- 用法：
在表单控件或者组件上创建双向绑定。
什么是双向数据绑定？- 数据变化了, 视图会跟着变
- 视图变化了, 数据要跟着变
<template><div><input type="text" placeholder="用户名" v-model="username"><input type="password" placeholder="密码" v-model="password"><button @click="login">提交</button></div></template><script>export default {name: "App",data(){return{username:'',password:'',}},methods:{login(){console.log(this.username,this.password);}}};</script>
v-model修饰符
<template><div><input type="text" placeholder="输入用户名" v-model="username"><input type="text" placeholder="输入密码" v-model="password"><br><!-- 此时的vue后台输出的是字符串--><input type="number" placeholder="输入年龄" v-model="age"><br><input type="number" placeholder="输入年龄 数字类型" v-model.number="age1"><br><input type="text" placeholder="前后空格不显示" v-model.trim="count"><br><input type="text" placeholder="失去焦点才更新数据" v-model.lazy="update"></div></template><script>export default {name: "App",data(){return{username:'',password:'',age:'',age1:'',count:'',update:'',}}};</script>
7.vue指令 v-text和v-html
作用：更新元素的innerText/innerHTML
语法: v-text=”值” v-html=”值”
区别：v-text 不解析标签 v-html 解析标签
<template><div><h1 v-text="button"></h1><h1 v-html="button2"></h1></div></template><script>export default {name: "App",data(){return{button:'<button>按钮</button>',button2:'<button>按钮2</button>'}}};</script>
8.vue中获取事件对象（了解）
vue中获取事件对象：
(1) 没有传参, 通过形参接收 e
(2) 传参了, 通过$event指代事件对象 e
基于获取事件对象中的e.preventDefault() 我们有更加简单的方法实现 （看第六！！）
六.修饰符
事件修饰符：vue提供事件修饰符，可以快速阻止默认行为或阻止冒泡
.prevent 阻止默认行为， .stop 阻止冒泡
按键修饰符：
在监听键盘事件时，我们经常需要判断详细的按键。可用按键修饰符。
需求: 用户输入内容, 回车时, 打印输入的内容。
- @keyup.enter 监听回车键
- @keyup.esc 监听返回键
vue内置的按键修饰符列表：
<template><div><input type="text" @keyup="fn"><input type="text" @keyup.enter="fn2"><input type="text" @keyup.esc="fn3"></div></template><script>export default {name: "App",data() {return {};},methods: {fn(){console.log("进入");},fn2(){console.log("监听回车键");},fn3(){console.log("监听返回键");}},};</script>
若有收获，就点个赞吧
0 人点赞
