VUE [入门篇]

未分类 2年前 (2022) 程序员胖胖胖虎阿

170 0 0

VUE简介

Vue优点

两个核心点

虚拟DOM

MVVM

声明式渲染

Vue入门

1.1入门示例

1. 安装

2. helloworld

1.2 内部指令

1、 v-if 、v-else、v-else-if、v-show

2、v-for

3、v-text 、v-html

4、v-on

5、v-model

6、v-bind

7、v-pre、v-cloak、v-once

VUE简介

渐进式框架

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式: 构建项目可以由简单到复杂

Vue优点

1.体积小压缩后的文件只有33k
2.运行效率更高采用虚拟机DOM,一种可以预先通过javaScript对数据进行计算.把最终的DOM操作计算出来并且优化的技术. 由于这个DOM操作属于预处理操作,并没有真实的操作DOM ,所以叫做虚拟DOM
3.双向数据绑定让开发者不再去操作DOM,将更多的经历投入到业务中
4.生态丰富市面上有大量的开源项目基于vue 进行开发成熟稳定.

两个核心点

（1）响应式数据绑定
当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。
（2）组合的视图组件
即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。

虚拟DOM

利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。当数据发生变化时，能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。

MVVM

1).字母解释
1.M model 数据
2.V view 视图
3.VM (view-model) 数据和视图的控制

2).当页面数据发生变化时,则通过dom监听将数据传给model
当model的数据发生变化时,则通过数据绑定绑定到页面中

VUE [入门篇]

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
额外补充：
渲染分为：命令式渲染和声明式渲染
命令式渲染：命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行
声明式渲染：只需要告诉程序想要什么效果，其他的交给程序来做
具体区别看如下代码，执行结果一样，实现方式不同。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>命令式渲染和声明式渲染</title>
		
	</head>
	<body>
		<script type="text/javascript">
			var arr = [1,2,3,4,5];
			// 命令式渲染：关心每步，关心流程，用命令去实现
			var newArr = [];
			for(var i = 0, len = arr.length; i < len; i++) {
				newArr.push(arr[i] * 2);
			}
			console.log(newArr);

			// 声明式渲染：不关心中间流程，只需要关心结果和实现条件
			var arr1 = arr.map(function(item) {
				return item*2;
			});
			console.log(arr1)
		</script>
	</body>
</html>

1.Vue入门

1.1入门示例

1. 安装

(1) CDN引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

(2) NPM安装

npm install vue

2. helloworld

<!--第一步：创建文件夹及html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门之Helloworld</title>
    <!--第二步：引入Vue库-->
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
    <!--第三步:创建一个Div-->
    <div id="app">
        <!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->
        {{message}}
    </div>

    <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
    <script type="text/javascript">
        var app=new Vue({ // 创建Vue对象。Vue的核心对象。
            el:'#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
            data:{    // data: 是Vue对象中绑定的数据
                message:'hello Vue!' // message 自定义的数据
            }
        })
    </script>
</body>
</html>

1.2 内部指令

1、 v-if 、v-else、v-else-if、v-show

这几个条件指令用于显示与隐藏各类元素，使用方式如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构语法</title>
	</head>
	<body>
		<div id="app" align="center">
			<h1>根据根据分数评级</h1>
			<!-- v-if当判断条件成立时 div展现  控制dom元素增加 开销较大 -->
			<div v-if="score>=90">优秀</div>
			<div v-else-if="score>=80">良好</div>
			<div v-else-if="score>=70">中等</div>
			<div v-else>不及格</div>
			
			<!-- 直接渲染到页面中采用display: none;隐藏属性 如果频繁展现的元素 使用v-show -->
			<div v-show="flag">测试show数据</div>
			<button @click="flag= !flag">展现</button>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					//定义分数
					score: 100,
					flag: false
				}
			})
		</script>
	</body>
</html>

VUE [入门篇]

v-if与v-show的区别

v-if：在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，开销较高，在运行时条件很少改变时使用。
v-show：调整css dispaly属性，开销较小，在常频繁地切换时使用。

2、v-for

(1) 基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<!--模板-->
<div id="app">
    <ul>
        <li v-for="item in items">
            {{item}}
        </li>
    </ul>
</div>
<!--js代码-->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            items:[20,23,18,65]
        }
    })
</script>

</body>
</html>

VUE [入门篇]

(2) 对象遍历

参数: 第一个为值,第二个为键名,第三个为索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script></head>
</head>
<body>
<!--模板-->
<div id="app">
    <ul>
        <li v-for="(value,key,index) in object">
            {{ index }}. {{ key }} - {{ value }}
        </li>
    </ul>
</div>

<!--js代码-->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            object:{
                firstName: 'John',
                lastName: 'Doe'
            }
        }
    })
</script>
</body>
</html>

VUE [入门篇]

3、v-text 、v-html

（1）v-text

{{xxx}}取值有个弊端，当网速很慢或javascript出错时，会在页面显示{{xxx}} (插值闪烁)，Vue提供的v-text可以解决这个问题

作用: 直接展现解析数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>

<div>
    {{ message }}
</div>

<!--和下面的一样-->
<div v-test="message"></div>

</body>
</html>

VUE [入门篇]

（2）v-html

用于解析html的数据

<!-- v-html指令  直接显示html效果 容易被攻击 本网站内可以使用
     第三方数据来源不要使用-->
<p v-html="html"></p>

4、v-on

（1）常规用法

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>

<!--v-on常规用法-->
<div id="add">本场比赛得分: {{count}}
    <button v-on:click="add">加分</button>
</div>

<!--//JS-->
<script type="text/javascript">
    new Vue({
        el: '#add',
        data:{
            count: 1
        },
        methods: {
            add: function(){
                this.count++;
            }
        }
    });
</script>



</body>
</html>

VUE [入门篇]

（2）缩写

<button @click="add">加分</button>

5、v-model

用法: 在表单控件或者组件上创建双向绑定,当js数据修改时,页面内容变化, 当页面内容修改时,则数据变化.

以下的model都需要在data中声明初始值

data: {
            message: "a",
            count: 1,
            status: [],
            sex: '男',
            selected: ''
        }

（1）input

<input type="text" v-model="message">

（2）textarea

<textarea  cols="30" rows="10" v-model="message"></textarea>

（3）checkbox

<input type="checkbox" id="first" value="1" v-model="status">
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status">
<label for="second">无效</label>
<div>状态：{{status}}</div>

（4）radio

<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<div>性别：{{sex}}</div>

（5）select

<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<div>Selected: {{ selected }}</div>

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-model="message"/>
    <br>

    <textarea cols="30" rows="10" v-model="message"></textarea>
    <br>

    <input type="checkbox" id="first" value="1" v-model="status"/>
    <label for="first">有效</label>
    <input type="checkbox" id="second" value="2" v-model="status"/>
    <label for="second">无效</label>
    <div>状态:{{status}}</div>
    <br>

    <input type="radio" id="one" value="男" v-model="sex"/>
    <label for="one">男</label>
    <input type="radio" id="two" value="女" v-model="sex"/>
    <label for="one">女</label>
    <div>性别:{{sex}}</div>
    <br>

    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <div>Selected {{ selected }}</div>
    <br>
</div>


<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            message: "a",
            count: 1,
            status: [],
            sex: '男',
            selected: ''
        }
    })
</script>
</body>
</html>

VUE [入门篇]

6、v-bind

用于处理html标签的动态属性，即动态赋值。

(1) 常规用法

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-blind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>



</head>
<body>
    <div id="app">

        <img v-bind:src="imgSrc"   width="400px">

    </div>


    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                imgSrc: "../img/20220114112403.png"
            }
        })
    </script>
</body>
</html>

VUE [入门篇]

(2) 缩写

<img :src="imgSrc"  width="400px">

7、v-pre、v-cloak、v-once

（1）v-pre

用法:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-pre>{{ message }}</div>
    </div>


    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                message: 'A'
            }
        })
    </script>

</body>
</html>

VUE [入门篇]

（2）v-cloak

介绍:
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>


</head>

<body>
<style type="text/css">
    [v-cloak] {
        display: none;
    }
</style>
<div id="app">
    <div v-cloak>{{message}}</div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            message: '欢迎使用'
        }

    })
</script>
</body>
</html>

VUE [入门篇]

（3）v-once

用法:
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <span v-once>{{message}}</span>
</div>

<script>
    new Vue({
        el:'#app',
        data: {
            message: '0'
        }
    })
</script>
</body>
</html>

VUE [入门篇]

版权声明：程序员胖胖胖虎阿发表于 2022年8月31日下午6:08。
转载请注明：VUE [入门篇] | 胖虎的工具箱-编程导航