vue-cli

叫我剑锋

已于 2023-03-28 21:08:45 修改

阅读量235

点赞数

文章标签： vue.js 前端 javascript

于 2022-05-25 18:50:09 首次发布

本文链接：https://blog.csdn.net/weixin_56846554/article/details/124971521

版权

一、MVVM

MVVM （ Model-View-ViewModel），MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View中由于需要展示内容而涉及的业务逻辑。

二、VUE

1、什么是Vue.js

Vue (类似于 view) 是一套用于构建用户界面的渐进式框架.
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架！

前端框架：一套完整的解决方案
前端组件：针对某个方面进行封装

html 标签标记浏览器解析标签渲染网页网页内容（骨架）
CSS 级联样式表修饰网页外观浮动、定位、字体、背景···
javaScript 脚本语言嵌套在网页中，可以为网页添加动态效果

2、Vue.js的优点

体积小
更高的运行效率
用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。
基于虚拟 dom，一种可以预先通过 JavaScript 进行各种计算，把最终的 DOM 操作计算出来并优化的技术，由于这个 DOM 操作属于预处理操作，并没有真实的操作 DOM，所以叫做虚拟 DOM.最后在计算完毕才真正将 DOM 操作提交，将 DOM 操作变化反映到 DOM 树上。
双向数据绑定，简化Dom操作
通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象, 把更多的精力投入到业务逻辑上.
生态丰富，学习成本低
市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件！来即用实现快速开发！对初学者友好、入门容易、学习资料多

3、Vue安装

4、模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

三、Vue指令

指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。

{{}}: 不会覆盖标签体中的内容不能解析标签
v-text:会覆盖标签体中的内容不能解析标签
v-html:会覆盖标签体中的内容能解析标签

v-text

作用是设置标签的文本内容
默认写法会替换全部内容，使用插值表达式可以替换指定内容

内部支持写表达式:

<p v-text="message+1">非凡英才</p>
<p>{{message+1}}非凡英才</P>

v-html

作用是设置元素的inner
HTML内容中有html结构会被解析为标签

内部支持写表达式

<p v-html="message+1">非凡英才</p>

v-on

作用是为元素绑定事件
事件名不需要写on指令可以简写为@

绑定方法定义在methods属性中，可以传入自定义参数

<input type=“button” value=“按钮” v-on:click=“test(1,2)”/>
<input type=“button” value=“按钮” @click=“test”/>

methods:{
    test(a,b){
        alert(a);
    }
}

v-model

作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联

绑定的数据<---->表单元素的值双向数据绑定

<input type="text" v-model="message"/>
<p>{{message}}</p>

data:{
    message:""
}

v-show

作用是根据真假切换元素的显示状态
原理是修改元素的 display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为 true 元素显示，值为 false 元素隐藏

数据改变之后，对应元素的显示状态会同步更新

<img v-show="isShow" src="img/3.jpg" />
<img v-show="age>18" src="img/3.jpg" />

data:{
    isShow:true,
    age:20
}

v-if

作用是根据表达式的真假切换元素的显示状态
本质是通过操纵 dom 元素来切换
显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除
频繁的切换 v-show，反之使用 v-if，前者的切换消耗小

v-bind

作用是为元素绑定属性

完整写法是 v-bind：属性名

简写的话可以直接省略 v-bind，只保留：属性名

<img v-bind:src="imgSrc" />
<img :src="imgSrc" />
<img :title="imgTitle" :src="imgSrc" />

data:{
    imgSrc:'img/3.jpg'
    imgTitle:"这是一张图片"
}

v-for

作用是根据数据生成列表结构
数组经常和 v-for 结合
使用语法是（item，index）in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上是响应式的
为循环绑定一个 key 值 :key=”值” 尽可能唯一

<li v-for="item in array">
    {{item}}省
</li>
<li v-for="(item,index) in array">
    {{index+1}}{{item}}省
</li>
<li v-for="(item,index) in objects">
    {{index+1}}{{item.name}}{{item.age}}
</li>

data:{
    array:['陕西','山西','河南'],
    objects:[
            {name:'admin',age:23},
            {name:'jim',age:22}
    ]
}

vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统：

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		    {{message}}   <!--插值表达式显示数据-->
		</div>
		
		<script>
			//创建的vue对象
			var app = new Vue({
				el:"#app",//数据挂载点
				data:{//数据
					message:'Hello Vue!'
				}
			})
		</script>
	</body>
</html>



<!--
代码解析：

{{变量}}  模板语法，插值表达式获取数据

new Vue();  创建Vue对象（VM对象）

el：数据挂载的dom对象

   vue会管理el选项命中的元素及其内部的后代元素

   可以使用其他的选择器，建议使用ID选择器

   可以使用其他的闭合器，不能使用HTML和body

data：{message:“hello world”} model数据

   vue中用到的数据定义在data中

   data中可以写复杂类型的数据，如对象，数组

   渲染复杂类型数据时，遵守js的语法即可
-->

插值文本

数据绑定最常见的形式就是使用“Mustache”语法的插值文本：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

部分代码示例：

methods:{

test(a,b){

    alert(a);

}

}

完整代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p> {{message}} </p>
			<p v-text="message"> </p>
			<p v-html> {{message}} </p>
	
			<input type="button" value="测试按钮1" v-on:click="test1('aaaa')"/>
			<input type="button" value="测试按钮2" @click="test2('bbbb')"/>
		</div>
		<script>
			//创建的vue对象
			var app = new Vue({
				el:"#app",
				data:{
					message:"Hello Vue!"
				},
				methods:{
					test1(a){
						this.message=a;
					},
					test2(b){
						this.message=b;
					}
				}
			})
		</script>
	</body>
</html>

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!--
			    v-model="acconut" 设置获取表单元素值 (value属性的值)
			-->
			<p v-text="account"></p>
			<input type="text" v-model="account"/>
			<input type="button" @click="test1()" value="按钮"/>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					account:""
				},
				methods:{
					test1(){
						this.account="admin";
					}
				}
			})
		</script>
	</body>
</html>

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!--
			    v-show  通过控制dispay属性，隐藏显示标签，不删除标签
				v-if    隐藏时，会删除掉标签  速度慢  操作少量
			-->
			<img src="img/1.gif" v-show="isShow"/>
			<img src="img/2.gif" v-show="age>22"/>
			<input type="button" value="测试按钮1" v-on:click="test1()"/>
			<img src="img/3.gif" v-if="isShow"/>
			<img src="img/4.gif" v-if="age>22"/>
			<img src="img/5.gif" v-else=/>
			<!-- v-if 必须和 v-else 紧挨一起才有效 -->
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
				    isShow:true,
					age:23
				},
				methods:{
					test1(){
						this.isShow=false;
						this.age=20
					}
				}
		    })
		</script>
	</body>
</html>

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!--
			    v-bind 为标签其他的属性动态进行数据绑定
			-->
			<img v-bind:src="imgurl"/>
			<img :src="imgurl"/>
			<input type="button" @click="test1()" value="下一张"/>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					array:["img/1.gif","img/2.gif","img/3.gif"],
					imgurl:"img/1.gif",
					index:0
				},
				methods:{
					test1(){
						this.index++;
						this.imgurl=this.array[this.index];
					}
				}
			})
		</script>
	</body>
</html>

<li v-for="item in array">

{{item}}省

</li>

<li v-for="(item,index) in array">

{{index+1}}{{item}}省

</li>

<li v-for="(item,index) in objects">

{{index+1}}{{item.name}}{{item.age}}

</li>

data:{

array:['陕西','山西','河南'],

objects:[

{name:'admin',age:23},

{name:'jim',age:22}

]

}

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<select>
				<option v-for="c in city">{{c}}</option>
			</select>
			<table border="1">
				<tr>
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<tr v-for="(user,index) in user">
					<td>{{index+1}}</td>
					<td>{{user.name}}</td>
					<td>{{user.age}}</td>
				</tr>
				
			</table>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					city:["北京","上海","重庆"],//List<String> list = new ArrayList()
					user:[{name:"jim1",age:20},{name:"jim2",age:20},{name:"jim3",age:20}]
				},
				methods:{
				}
			})
			
			//"{name:jim}" json
			
			/* for (var i = 0; i < city.length; i++) {
				s+="<option>""+city[i]+""</option>"
			} */
		</script>
	</body>
</html>

Vue实例生命周期：

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

beforeCreate: function () {
    console.log('beforeCreatea');
},
created: function () {
    console.log('createda ' );
},
beforeMount:function(){
    console.log('beforeMounta’);
},
mounted:function(){
    console.log('mounteda’);
}

叫我剑锋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue-cli

html 标签标记浏览器解析标签渲染网页网页内容（骨架）CSS 级联样式表修饰网页外观浮动、定位、字体、背景···javaScript 脚本语言嵌套在网页中，可以为网页添加动态效果前端框架：一套完整的解决方案前端组件：针对某个方面进行封装Vue.js：一款js框架，对js的语法进行封装简化ElementUI：是一款UI（用户界面）框架，封装很多常用的前端组件，布局，表单，表格等；（还有easyUI）Vue.js中文官网：cn.vuejs.org.
复制链接

扫一扫