vue学习总结

Allez_Levide 2020-11-08 20:18:42
javascript


vue项目运行流程

  1. package.json 在执行npm run dev的时候,会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件,包含项目的名称版本、项目依赖等相关信息

  2. webpack.dev.conf.js 从下图中可以看到, 启动 npm run dev 命令后,会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。

  3. config*.js webpack.dev.conf.js 中引入了很多模块的内容,其中就包括 config 目录下服务器环境的配置文件。

  4. config/index.js 可以看到,在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置,默认启动端口是8080,这里可以进行修改。

  5. index.html index.html 的内容很简单,主要是提供一个 div 给 vue 挂载。

  6. main.js main.js 中, 引入了 vue、App 和 router 模块, 创建了一个 Vue 对象,并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下, 并绑定了一个路由配置。

  7. App.vue 上面 main.js 把 App.vue 模板的内容,放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到,这个页面的内容由一个 logo 和一个待放置内容的 router-view,router-view 的内容将由 router 配置决定。

  8. index.js 查看 route 目录下的 index.js,我们发现这里配置了一个路由, 在访问路径 / 的时候, 会把 HelloWorld 模板的内容放置到上面的 router-view中。

  9. HelloWorld.vue HelloWorld 中主要是一些 Vue 介绍显示内容。

  10. 页面组成 所以,页面关系组成是 index.html 包含 App.vue,App.vue 包含 HelloWorld.vue 。

vue语法

第一个vue应用

  1. 使用vue之前要先导入
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
  1. body里面建立视图层,即一个div
<div id="app">
{{ message }}
</div>`
  1. body里面script代码,创建vue对象,并对视图层声明对象进行注册,并且初始化
<script type="text/javascript">
var app1 = new Vue({ //new Vue时,需要传递一个对象作为参数
el: '#app', //el即element,用Id选择器选中div
data:{ //用于保存数据,我们在视图里面声明了什么变量,在这里就要注册什么变量,并进行初始化的赋值
message:'hello word!',
}
});
</script>

vue常用数据及方法

  1. 第一节中,我们对变量的初始化是在data里面进行,我们也可以申明一个var变量进行初始化
var date = {a:1}; //a赋值1
var vm = new Vue({
el: '#app',
data: date //直接将date赋值给data
});
  1. 对变量a进行修改值时,我们有多种方法
date.a = 'hello'; //可以直接这样修改a的值
vm.a = 'hello'; //修改结果和上面相同
  1. vue暴露一些常用的变量例如Object.$dataObjece.$el,所以修改变量还可以这样子
vm.$data.a = 'hello';
  1. vue也暴露一些常用的方法

Object.freeze()函数会阻止修改现有属性

Object.$watch可以观察一个变量的前后变化值,如:

<div id="app">
{{ a }}
</div>
<script type="text/javascript">
var date = {a:1}; //a赋值1
var vm = new Vue({
el: '#app',
data: date //直接将date赋值给data
});
vm.$watch('a', function(newval, oldval){
console.log(newval, oldval);
});
vm.$data.a = 'sda';
</script>

那么控制台将打印出sda 1,即a变量改变后的值和先前的值

Vue的生命周期

  1. beforeCreate函数

在实例初始化之前,数据观测(data obsever)和event/watcher事件配置之前被调用

beforeCreate:function(){
console.log('beforeCreate');
},
  1. created

在实例被创建完成后被立即调用,在这一步,实例已经完成以下配置:数据观测(data observer),属性和方法的运算,watch/event事件回调.然而,挂载阶段还没开始,$el属性目前不可见

created:function(){
console.log('created');
},
  1. beforeMount

在挂载开始之前被调用,相关的渲染函数首次被调用

beforeMount:function(){
console.log('beforeMount');
},
  1. mounted

el被新创建的vm.$el替换,挂载成功

mounted:function(){
console.log('mounted');
},
  1. beforeUpdate

数据更新时调用

beforeUpdate:function(){
console.log('beforeUpdate');
},
  1. updated

组件DOM已经更新,组件更新完毕

updated:function(){
console.log('updated');
}

声明周期的综合运用

<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg : 'hello vue',
},
beforeCreate:function(){
console.log('beforeCreate');
},
created:function(){
console.log('created');
},
beforeMount:function(){
console.log('beforeMount');
},
mounted:function(){
console.log('mounted');
},
beforeUpdate:function(){
console.log('beforeUpdate');
},
updated:function(){
console.log('updated');
}
});
setTimeout(function(){
vm.msg = 'change';
},3000);
</script>

结果如下

beforeCreate
created
beforeMount
mounted
Download the Vue Devtools extension for a better development experience:https://github.com/vuejs/vue-devtools
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
beforeUpdate
updated

插值

  1. vue通常用{{ 值 }}的方式来向页面内插值
<div id="app">
<p>{{msg}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'hi vue',
}
});
</script>
  1. v-once属性 用v-once属性修饰的div标签里面的{{ 变量 }}的值,只会修改一次
<div id="app">
<p v-once>{{msg}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'hi vue',
}
});
vm.msg = 'hi...' ;
console.log(vm.msg);
</script>

这段代码的运行结果,显示的仍然是“hi vue”而不是“hi···”

  1. v-bind属性可以实现动态的绑定元素属性 例如,下面这个例子,动态的设置了div的class
<div id="app">
<div v-bind:class="color">test...</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
color: 'blue',
}
});
console.log(vm.msg);
</script>
<style type="text/css">
.blue{color: blue; font-size: 60px;}
</style>

这个属性即可以实现,点击按钮变换元素样式的功能

  1. v-html属性,可以实现动态插入一段html代码 例如下面的例子,插入了一行html代码
<div id="app">
<p v-html="rawHtml"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
rawHtml: '<span style="color:red">this is should be red</span>',
}
});
vm.msg = 'hi...' ;
console.log(vm.msg);
</script>
<style type="text/css">
.red{color:red;}
</style>
  1. vue支持在{{ }}里面加入JavaScript代码
  • {{ number + 1 }}
  • 三元运算符 {{ 1 == 1 ? 'yes' : 'no'}}
  • 一些函数{{message.split('').reverse().join('')}}。其中,split('')表示用‘’里面的字符分割message;reverse()表示反转;join('')表示用()里面的字符重新拼接。注意,split分割之后形成一个单字符数组。reverse反转的也是字符数组。
<div id="app">
<p>{{ msg.split('').reverse().join('.') }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'vue',
}
});
console.log(vm.msg);
</script>

结果将输出 e.u.v

vue指令

  1. v-if与v-else指令,vue通过这两个指令实现,根据Vue对象的值来动态的选择执行语句
<div id="app">
<p v-if="seen">现在你看到我了</p>
<p v-else="seen">你不应该看到我</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
seen: 'false',
}
});
console.log(vm.msg);
</script>

结果将输出你不应该看到我 另外还有v-else-if,用来充当,if后面的else if。

  1. v-bind属性支持动态修改attribute
<div id="app">
<a v-bind:href="url">超链接</a>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
url: 'https://cn.vuejs.org/v2/guide/installation.html',
}
});
console.log(vm.msg);
</script>
  1. vue的@click函数 vue可以通过@click函数动态绑定一个函数
<div id="app">
<div @click="click1">
<div @click.stop="click2">
click me
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
url: 'https://cn.vuejs.org/v2/guide/installation.html',
}
}),
method:{
click1:function(){
console.log('click1...');
}
},
click2:function(){
console.log('click2...');
}
</script>

执行结果

click2...

本来应该先输出click2在输出click1,但是由于我们在内div里面加入了一个@click.stop="click2",所以在执行完click2之后暂停,所以没有执行外边的div的函数click1

v-bind绑定style与class

  1. 代码如下
<div id="app">
<div
class="test"
v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '' ]">
hi vue
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
isActive: 'true',
isGreen: 'true'
}
});
</script>
<style type="text/css">
.active{background-color: #0000FF;}
.green{color: #000000;}
</style>

结果:hi vue将变成背景是蓝色(#0000FF),字体颜色黑色(#000000)

vue条件渲染

  1. v-if,v-else-if,v-else
<div id="app">
<div v-if = "type === 'A'">
now is A
</div>
<div v-else-if = "type === 'B'">
now is B
</div>
<div v-else-if="type === 'C'">
now is C
</div>
<div v-else>
no A/B/C
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
type:"",
}
});
</script>
  1. v-if 与 v-show v-if如果为否则不会渲染进代码,但是v-show为否仍然会渲染进代码,知识修改了元素的CSS为display

v-for

  1. 遍历以便vue对象的值
<div id="app">
<ul>
<li v-for="item in items">
{{item.msg}}
</li>
</ul>
<ul>
<li v-for = "value,key in values" >
{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
items:[
{msg:"aaa"},
{msg:"bbb"}
],
values:{
name:"levide",
age:"19",
sex:"man"
}
}
});
</script>

运行结果为

·aaa
·bbb
·levide
·19
·man

事件绑定

我们通过v-on属性绑定一个事件,这个事件可以直接是一条JavaScript语句,或者一个函数名字。

<div id="app">
<button type="button" v-on:click="date += 1">数值:{{date}}</button><br/>
<button v-on:click="hello(name,$event)">欢迎</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
date : 0,
name : 'levide',
},
methods:{
hello:function(str,e){
alert(str);
console.log(e);
}
}
});
</script>

运行结果,

  1. 点击第一个按钮,数值自动加一,一直点一直加
  2. 点击第二个按钮,弹出警告,并在控制台打印出事件

表单输入绑定

我们通过v-model进行双向绑定,一经修改,两头都修改

  1. 单行文本双向绑定
<div id="example-1">
<input v-model="msg1" />
<p>你输入了:{{ msg1 }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
msg1:"请好好输入",
},
});
</script>

结果显示,表单里面输入什么,<p>标签里面实时跟着修改

  1. 多行文本双向绑定
<div id="example-2">
<textarea v-model="msg2"></textarea>
<p>你输入了:{{msg2}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
msg2:"请好好输入",
},
});
</script>

结果同样是实时变换

  1. 复选框双向绑定
<div id="example-3">
<input type="checkbox" name="1" id="jack" value="jack" v-model="msg3" />
<label for="jack">jack</label>
<input type="checkbox" name="2" id="tom" value="tom" v-model="msg3" />
<label for="tom">tom</label>
<input type="checkbox" name="3" id="daming" value="daming" v-model="msg3" />
<label for="daming">daming</label>
<p>您选择了:{{msg3}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
msg3:[], //此处因为复选框选中的是数组,所以用[]接受
},
});
</script>

结果,选中什么[]中就添加什么

  1. 单选框双向绑定
<div id="example-4">
<input type="radio" name="1" id="one" value="jack" v-model="msg4" />
<label for="one">jack</label>
<input type="radio" name="2" id="two" value="tom" v-model="msg4" />
<label for="one">Tom</label>
<input type="radio" name="1" id="one" value="daming" v-model="msg4" />
<label for="one">daming</label>
<p>您选择了:{{ msg4 }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
msg4:"",
},
});
</script>

结果,选中什么[]中就添加什么

  1. 综合前边的所有双向绑定,我们进行表单的提交
<div id="app">
<div id="example-1">
<input v-model="msg1" />
<p>你输入了:{{ msg1 }}</p>
</div>
<div id="example-2">
<textarea v-model="msg2"></textarea>
<p>你输入了:{{msg2}}</p>
</div>
<div id="example-3">
<input type="checkbox" name="1" id="jack" value="jack" v-model="msg3" />
<label for="jack">jack</label>
<input type="checkbox" name="2" id="tom" value="tom" v-model="msg3" />
<label for="tom">tom</label>
<input type="checkbox" name="3" id="daming" value="daming" v-model="msg3" />
<label for="daming">daming</label>
<p>您选择了:{{msg3}}</p>
</div>
<div id="example-4">
<input type="radio" name="1" id="one" value="jack" v-model="msg4" />
<label for="one">jack</label>
<input type="radio" name="2" id="two" value="tom" v-model="msg4" />
<label for="one">Tom</label>
<input type="radio" name="1" id="one" value="daming" v-model="msg4" />
<label for="one">daming</label>
<p>您选择了:{{ msg4 }}</p>
</div>
<button v-on:click="submit">提交</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
msg1:"请好好输入",
msg2:"请认真输入",
msg3:[],
msg4:"",
},
methods:{
submit:function(){
var test = {
msg11 : this.msg1,
msg22 : this.msg2,
msg33 : this.msg3,
msg44 : this.msg4
};
console.log(test);
}
}
});
</script>

结果控制台打印输出:

{"msg11":"请好好输入","msg22":"请认真输入","msg33":["jack","tom"],"msg44":"jack"}

组件基础

组件是可复用的vue实例,在开发过程中我们经常把重复的功能封装为组件,达到快捷便捷开发的目的。vue用vue.component函数创建一个组件,第一个参数是组件的描述,第二个参数是“以对象的形式描述一个组件”

  1. 绑定例子。在这个例子中,我们给button绑定了一个组件,这个组件里面定义了一个模板,模板里面绑定了函数,同时共用vue对象
<div id="app">
<button1 title = "button1"></button1>
</div>
<script type="text/javascript">
Vue.component('button1',{
props:['title'],
data:function(){
return{
count:0
}
},
template:'<button v-on:click="clickCount">{{title}}你点了{{count}}次</button>',
});
var vm = new Vue({
el:'#app',
data:{
},
});
</script>

结果,界面生成一个按钮,每点击一个,数值加一

  1. 组件可以共用
<div id="app">
<button1 title = "button1"></button1>
<button1 title="button2"></button1>
</div>
<script type="text/javascript">
Vue.component('button1',{
props:['title'],
data:function(){
return{
count:0
}
},
template:'<button v-on:click="clickCount">{{title}}你点了{{count}}次</button>',
});
var vm = new Vue({
el:'#app',
data:{
},
});
</script>

结果:界面生成两个按钮,每个按钮的组件相互独立。虽然每个按钮点击后数值都会加一,但是自己加自己的,不会相互干预

  1. 组件可以监听 其中emit事件用于,触发当前实例上的事件,第二个参数只是传递参数作用
<div id="app">
<button1 title = "button1"></button1>
<button1 title="button2"></button1>
</div>
<script type="text/javascript">
Vue.component('button1',{
props:['title'],
data:function(){
return{
count:0
}
},
template:'<button v-on:click="clickCount">{{title}}你点了{{count}}次</button>',
methods:{
clickCount:function(){
this.count++;
this.$emit('clicknow',this.count);
}
}
});
var vm = new Vue({
el:'#app',
data:{
},
methods:{
clicknow:function(e){
console.log(e);
}
}
});
</script>

局部注册组件

全局组件可能造成空间的浪费,因为可能出现:组件未被使用,但是用户还是要下载,这就造成了用户下载JavaScript资源的无用

  1. 局部注册演示
<div id="app">
<test></test>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
},
components:{
test:{
template:'<h2>sss</h2>'
}
}
});
</script>

#单文件组件 全局组件在小型项目中效果良好,但是在复杂的项目中,有些问题将变得非常明显:

  • 全局定义强制要求每个组件的命名不同
  • 字符串模板缺乏高亮,在HTML有多行时,需要用到丑陋的\
  • 不支持CSS意味着HTML和JavaScript组件化时,CSS明显被遗漏
  • 没有构建步骤
  1. 创建vue项目
  • 命令行,vue ui,打开UI界面
  • 然后点击create,输入项目名,点击创建
  • 关闭命令行、关闭浏览器
  • 打开项目目录,拖入Hbuilder
  1. vue项目目录介绍
  • public为我们写完项目后的入口文件
  • src为我们编写项目的文件,里面的component文件即单文件组件,
  • app.vue为项目的入口文件
  1. vue项目简介
  • 其中template为模板、视图;
  • script为脚本区域;
  • style为样式区域
  1. vue项目书写
  • 先在template里面写模板
  • 接着在script里面声明这个组件的属性(用props)、数据(包括类型type、默认值default)。还可以用methods声明这个组件的方法,data注册这个组件对应的数据
  • 在app.vue里面引入这个组件,通过import引入这个组件
  • 引入之后,在component里面进行局部注册
  • 注册之后,便可以在div中引用这个组件了 例子: test.vue文件
<template>
<h2>哈哈哈哈</h2>
</template>
<script>
export default{
name:'test',
props:{
msg:{
type:String,
default:"test msg"
}
},
methods:{
},
data(){
return{
}
},
}
</script>
<style>
</style>

app.vue文件

<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<test></test>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import test from './components/test.vue'
export default {
name: 'App',
components: { //局部注册
HelloWorld,
test
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

经过这个之后,项目成功运行

版权声明
本文为[Allez_Levide]所创,转载请带上原文链接,感谢
https://my.oschina.net/LevideGrowthHistory/blog/4708311

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple