Vue 整理学习

1. 0 mvvm 思想

M:即Model,模型,包括数据和一些基本操作
V: View,视图,页面渲染结果
VM: View-Mode ,模型与视图间的双向操作(无序开发人员干涉)

在MWM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中.

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的:

2. 0 Vue简介

Vue(读章/viu:/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也元全能够为复杂的单页应用提供驱动。
官网: https://cn.vuejs.org/
参考: https://cn.vuejs.org/v2/guide/
Git地址: https://github.com/vuejs
尤雨溪，Vue.js创作者，Vue Technology创始人，致力于Vue的研究开发。

3. 0 入门简介

在vs code中打开一个空文件夹,打开控制台
$ npm init -y
$ npm install vue

创建vue实例,关联页面的模板,将自己的数据(data)渲染到关联的模板,响应式的
指令来简化对don的一些操作
声明式方法来做更复杂的操作,methods 封装方法

<body> <div id="app"><input type="text" v-model="num"><button v-on:click="num++">点赞</button><button v-on:click="cancle">取消</button><h1> {{name}}xxx.有{{num}}个人给唱衰他</h1></div><script src="./vue/dist/vue.js"></script><script>//1. vue 声明式渲染let vm =new Vue({el: "#app",  //绑定元素data: {		//封装数据name:"张三",num:1},methods:{   //封装方法cancle(){this.num --;}}});</script>
</body>

3.1 插值表达式,v-text,v-html

 <div id="app"><!-- 插值表达式,写在标签体里,但在浏览器显示时 不友好 -->{{msg}} {{hello()}} {{1+1}}  <br/>     <span v-html="msg"></span><br/><span v-text="msg"></span></div><script src="../vue/dist/vue.js"></script><script>new Vue({el: "#app",data:{msg:"<h1>Hello</h1>"},methods:{hello(){return "world"}},})</script>

3.2 v-bind: , v-model:

   <!-- 给html 标签的属性绑定,v-bind:  单向绑定 --><div id="app"><a v-bind:href="link">gogogo</a><!-- class style : 简写--><span v-bind:class="{active:isActive,'text-danger':hasError}":style="{color: c1,fontSize:size}">你好</span></div><script src="../vue/dist/vue.js"></script><script>new Vue({el: "#app",data: {link: "https://www.baidu.com",isActive: true,hasError: true,c1: 'red',size:'33px'}})</script><!-- v-model 双向绑定,表单项,自定义组建 --><div id="app">精通的语言:<br><input type="checkbox" v-model="language" value="Java">Java<br><input type="checkbox" v-model="language" value="PHP">PHP<br><input type="checkbox" v-model="language" value="Python">Python<br>选中了{{language.join(",")}}</div><script src="../vue/dist/vue.js"></script><script>let vm =new Vue({el: "#app",data: {language:[]}})</script>

3.3 v-on 事件绑定 @click=""

在事件处理程序中调用‘event.preventDefault()或‘event.stopPropagation()是非常常见的 需求。
尽管我们可以在方法中轻松实现这点，但更好的方式是:方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
为了解决这个问题，Vue.js为'v-on'提供了事件修饰符。修饰符是点开头的指令后缀来表示的。

.stop:阻止事件冒泡到父元素
.prevent:阻止默认事件发生
.capture:使用事件捕获模式
.self:只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once:只执行一次

  <!-- v-on 双向绑定,@click=""  --><div id="app"><button v-on:click="num++">点赞</button><button @click="cancle">消</button><h1>有{{num}}个赞,</h1><!-- 事件 修饰符  @click.stop="hello" @click.prevent="hello" --><div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">大<div style="border: 1px solid bisque;padding: 20px;" @click.stop="hello">小DIV <br><a href="https://www.baidu.com"  @click.prevent.stop="hello">去百度</a></div></div><!-- 按键修饰符 --><input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num+=10"> </div><script src="../vue/dist/vue.js"></script><script>let vm = new Vue({el: "#app",data: {num: 1},methods: {cancle() {this.num--;},hello() {alert("点击了");}},})</script>

3.4 v-for

<div id="app"><ul><li v-for="(user,index) in users" :key="index"><!-- 1、显示user信息:v-for="item in items" -->当前索引:{{index}}-- {{user.name}} ===>{{user.gender}} ==>{{user.age}}<!-- 2、获取数组下标:v-for=" (item,index) in items" --><!-- 3、遍历对象:v-for="value in object"v-for=" (value,key) in object"v-for=" (value,key,index) in object"--><br>对象信息: <br><span v-for="(item, key,index) in user">{{key}}==>{{item}}==>{{index}};</span><!--4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率--></li></ul></div><script src="../vue/dist/vue.js"></script><script>let app = new Vue({el: "#app",data: {users: [{ name: "柳岩", gender: "女", age: 21 },{ name: "张三", gender: "男", age: 12 },{ name: "范冰冰", gender: "女", age: 34 },{ name: "刘亦菲", gender: "女", age: 24 },{ name: "古力娜扎", gender: "女", age: 24 },]}})</script>

3.5 v-show,v-if,v-else-if,v-else

 <div id="app"><button @click="show = !show">点我呀</button><!-- 1.使用v-if 显示 --><h1 v-if="show">if==看到我==</h1><!-- 2.使用v-show 显示 --><h1 v-show="show">show =看到我</h1></div><li v-for="(user,index) in users" :key="index" v-if="user.gender == '女'">

3.6 计算属性和监听器

 <div id="app"><!-- 某些结果是基于之前数据实时计算出哎的,计算属性来 --><ul><li>西游记;价格:{{xyjPrice}},数量:<input type="number" v-model="xyjNum"></li><li>水浒传;价格:{{shzPrice}},数量:<input type="number" v-model="shzNum"></li><li>{{totalPrice}}</li>{{msg}}</ul></div><script src="../vue/dist/vue.js"></script><script>let app = new Vue({el: "#app",data: {xyjPrice:99.98,shzPrice:98.00,xyjNum:1,shzNum:1,msg:""},computed: {totalPrice(){return this.xyjNum*this.xyjPrice+this.shzNum*this.shzPrice;}},//watch 可以让我们监控一个值的变化,从而做出相应的反应watch: {xyjNum:function(newVal,oldVal){if(newVal>=3){this.msg="库存超出限制";this.xyjNum=3;}else{this.msg="";}}},})</script>

3.7 过滤器

 <!-- 过滤器常用来处理文本格式化的操作,用在: 双花括号插值,和v-bind 表达式 --><div id="app"><ul><li v-for="user in userList"><!-- {{user.id}}==>{{user.name}}==>{{user.gender==1?"男":"女"}} -->{{user.id}}==>{{user.name}}==>{{user.gender| genderFilter}}==>{{user.gender| gFilter}}</li></ul></div><script src="../vue/dist/vue.js"></script><script>// 全局过滤Vue.filter("gFilter", function (val) {if (val == 1) {return "男";} else {return "女";}})let app = new Vue({el: "#app",data: {userList: [{ id: 1, name: "jacky", gender: 1 },{ id: 2, name: "老马", gender: 0 }]},filters: { //局部过滤器genderFilter(val) {if (val == 1) {return "男";} else {return "女";}}}})</script>

4. 0 组件化

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。
例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。
所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
在vue里，所有的wue实例都是组件

在这里插入图片描述

 <div id="app"><button @click="count++">我被点击{{count}} 次</button><counter></counter><button-counter></button-counter></div><script src="../vue/dist/vue.js"></script><script>//1.全局声明注册一个组建Vue.component("counter", {template: `<button @click="count++">我被点击{{count}} 次</button>`,data() {   //2.return {count: 1}},});//局部声明一个组件const buttonCounter = {template: `<button @click="count++">我被点击{{count}} 次</button>`,data(){return{count:2}}}new Vue({el: "#app",data: {count: 1},components:{"button-counter":buttonCounter}})</script>

组件其实也是一个Vue,实例，因此它在定义时也会接收:data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html,模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了
data必须是一个函数，不再是一个对象。

5.0 生命周期钩子函数

每个Vue实例在被创建时都要经过一系列的初始化过程∶创建实例，装载模板，渲染模板等等。
Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue,实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期:你不需要立马弄明白所有的东西。

 <div id="app"><span id="num">{{num}}</span><button @click="num++">赞!</button><h2> {{name}},有{{num}}个人点赞</h2></div><script src="../vue/dist/vue.js"></script><script>let app = new Vue({el: "#app",data: {name: "张三",num: 100},methods: {show() {return this.name;},add() {this.num++;}},beforeCreate() {console.log("========beforeCreate=====");console.log("数据模型未加载:" + this.name, this.num);console.log("fang方法未加载:" + this.show());console.log("html模板未加载: " + document.getElementById("num"));},created() {console.log("========Create=====");console.log("数据模型加载:" + this.name, this.num);console.log("fang方法加载:" + this.show());console.log("html模板加载: " + document.getElementById("num"));console.log("html模板还未渲染: " + document.getElementById("num").innerText);},beforeMount() {console.log("========beforeMount=====");console.log("html模板还未渲染: " + document.getElementById("num").innerText);},mounted() {console.log("========Mounted=====");console.log("html模板已渲染: " + document.getElementById("num").innerText);},beforeUpdate() {console.log("========beforeUpdate=====");console.log("数据模型已更新:" + this.num);console.log("html模板未更新: " + document.getElementById("num").innerText);},updated() {console.log("========updated=====");console.log("数据模型已更新:" + this.num);console.log("html模板已更新: " + document.getElementById("num").innerText);}});</script>

6.0 使用Vue脚手架进行模块化开发

1. npm install webpack -g

2. npm install -g @vue/cli-init

全局安装vue脚手架

3. 初始化vue项目

vue init webpack appname:vue脚手架使用webpack模块初始化一个appname项目

如提示vue 不是内部指令,说明没有将vue.cmd 添加到用户的环境变量中,一般是:

C:\Users\用户名\AppData\Roaming\npm\node_modules@vue\cli-init\node_modules.bin

4.启动vue项目

项目的package.json 中有scripts,代表我们能运行的命令
npm start =npm run dev :启动项目

改端口的话,在 config/index.js中

=========index.html
<div id="app"></div>
=========src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'Vue.config.productionTip = falsenew Vue({el: '#app',  router,components: { App },template: '<App/>'
})
<!--xx.vue文件,写模式是:<template></template><script></script><style></style>-->
====Hello.vue 自己写的===<template><div><h1> 你好,Hello ,{{name}}</h1></div></template><script>export default {data() {return {name: "张三"}},}</script><style></style>

====写好后注册到router/index.js中 写router地址==={path:'/hello',name: "Hello",component:Hello}
====在 src/App.vue 的路由视图下展示==
<template><div id="app"><img src="./assets/logo.png" /><router-link to="/hello">去hello</router-link><!-- 路由视图 --><router-view /></div>
</template>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Python爬取新版猫眼Top100电影系列数据，并保存到csv文件
前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。 PS：如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 python免费学习资料以及群交流解答点击即可加入开发工具 python 3.6.5pycharm im…...
2024/5/5 23:58:51
营销型网站建设页面制作注意事项
营销网站建设一直是一个热门话题，从推出，从最初的概念提出，到2015-2016年的洪流，家居堆产品的优势、特点、荣誉证书等劣质做法，到现在冷静思考后，对于企业来说，我们认为一个真正的营销网站应该是…...
2024/4/21 21:14:49
144Hz电竞专业显示器玩游戏怎么样？
各位兄弟姐妹们，最近上分还顺利吗？看着S10全球总决赛上，大神们一波又一波秀操作，是不是除了羡慕还是羡慕？也许，除了技术因素之外，更多的就是电竞装备的差别了。那么，属于电竞潮青年的…...
2024/5/5 18:48:51
神州去中心化交易所崛起之路
随着近两年，币圈的觉醒，DeFi的技术成熟，给整个币圈都带来了新的曙光和发展契机，基于此，神州Union交易所，应运而生！ 据悉，神州交易所于2020年9月8日15:00分申购正式开始，累…...
2024/4/21 21:14:46
加大“互联网+”力度，服装企业怎么转型？
如今，疫情趋缓，为缓解疫情所带来的损失，不少服装企业开始调整经营思路，加速构建线上运营体系，加强企业数字化和智能化的发展，加大线上零售的力度，利用直播带货、社群营销等线上营销方式扩大品牌…...
2024/4/21 21:14:45
[技术杂谈][原创]vmware安装win10提示“Cannot open /dev/vmmon: No such file or directory“
打开终端，输入 openssl req -new -x509 -newkey rsa:2048 -keyout MOK.priv -outform DER -out MOK.der -nodes -days 36500 -subj "/CNVMware/" sudo /usr/src/linux-headers-uname -r/scripts/sign-file sha256 ./MOK.priv ./MOK.der $(modinfo -n vmm…...
2024/4/22 23:19:27
AI人工智能（调包侠）速成之路三（开发环境安装TensorFlow 2.0）
及简三步安装 1，Anaconda,Python3.8 安装下载地址：https://www.anaconda.com/products/individual#download-section Windows Python 3.8 64-Bit Graphical Installer (466 MB) 32-Bit Graphical Installer (397 MB) MacOS Python 3.8 64-Bit …...
2024/4/26 11:54:10
在线游戏，如何把握住1个亿以上的DAU？
单款手游日流水达到约20亿元人民币，2020年新冠疫情、节日假期等外部因素汇聚在一起，将中国游戏产业的规模又推上了一个新台阶。据测算，在2020年春节档期间，该款手游DAU（日活跃用户数）达到了1.09亿&#xff…...
2024/5/5 22:30:20
YDOOK：AI框架人工智能框架入门选择 TensorFlow 还是 Pytorch
Tensorflow 与 Pytorch 的对比 TensorFlow TensorFlow 是谷歌的开发者创造的一款开源的深度学习框架，于 2015 年发布。2. 官方研究发布于论文《TensorFlow：异构分布式系统上的大规模机器学习》。论文地址：http://download.tensorflow.org/p…...
2024/5/5 20:17:15
做Spring项目需要用到的网址
Spring Boot官方地址为： https://spring.io/projects/spring-boot...
2024/5/5 16:44:56
HTML 行内元素与块元素
块级元素-block element 行内元素-inline element 块级元素，行内元素与行内块元素的区别元素特性块元素独占一行可以设置宽高，如果不设置则宽度自动填满父元素宽度，高度被内容撑开；如无内容，则高度为空行内元素不会独…...
2024/4/28 6:34:52
数据结构双向链表及基本操作实现(C语言实现)
双向链表基本操作的实现双向链表的特点：双向链表相对于单向链表其优点在于其可以同时查看某个节点的前驱节点和其后继节点，当然因为一个节点使用了两个指针来记录前后节点的位置，其每个节点占用的内存空间自然更大其实现的基本操作代码如…...
2024/4/28 21:59:11
Android 超实用的LogUtils自定义Log日志工具类
自定义Log日志，定义开关状态，然后打印和关闭日志，超级方便，记录下代码如下： import android.util.Log; import androidx.annotation.IntDef;public final class LogUtils {public static final int V Log.VERBOSE;p…...
2024/5/4 21:44:45
你觉得typescript和javascript有什么区别 typescript你都用过哪些类型 -typescript中type和interface的区别
你觉得typescript和javascript有什么区别typescript你都用过哪些类型typescript中type和interface的区别您的回答：## 你觉得typescript和javascript有什么区别类型特征不同JavaScript类型系统特征——弱类型且动态类型typescript类型系统特征——强类型且静态类型…...
2024/4/28 22:39:48
基于块修复的图像修复算法
采取的模板是5*5规格大小 # 同一张图片里，寻找相似的5*5的batch块补全图像缺失的部分,按像素补全# 模板匹配采取误差平方和最小ssd算法 import cv2 import numpy as np def ssd_distance_two_batch(batch1,batch2,pic,flag_to_deal):# batch1，batch2是…...
2024/4/28 18:55:36
leetcode-226. 翻转二叉树
谷歌：我们90％的工程师使用您编写的软件(Homebrew)，但是您却无法在面试时在白板上写出翻转二叉树这道题，这太糟糕了。示例： 输入： 4/ \2 7/ \ / \ 1 3 6 9 输出： 4/ \7 2/…...
2024/5/5 20:16:07
游戏创意（g更新留言）
（有啥好的可留言我加进来到时候无聊的时候可以做游戏） 1.一个综艺游戏（类型爸爸去哪儿极限挑战，等） 可以做一个选几个角色（不同特点） ，去玩一场多个小游戏组成的大游戏的欢乐之旅…...
2024/4/28 20:54:46
21C++ 16.2.3 拼接字符串
程序清单 16.3 #include<string> #include<iostream> using namespace std;int main(){string s1 ("ni"), s2 (" shi"), s3 (" shui");const char* p "???";// use s1 s2; //or s1 s1 s2; s1 是 ni shi;cout <…...
2024/4/28 5:58:36
Spring框架中ApplicationContext与BeanFactory的区别
前言 Spring框架中ApplicationContext与BeanFactory的区别。其中，BeanFactory为ApplicationContext的父类，是一种继承关系，ApplicationContext的功能要强于BeanFactory。创建实例的区别以下是两个接口创建实例的方法： Appli…...
2024/4/28 7:00:21
Thinkphp底层源码分析第一章
Thinkphp底层源码分析第一章首先我们学习此章节的内容大家可能需要有一些基础才行，接着对PHP内置字符窜数组相关函数会用的比较多一点，当然不太熟悉的朋友，其实可以借助手册看下去，手册下载地址我放在了另一篇博客里链接(大家点…...
2024/4/27 21:42:17