Vue全家桶 之 Vue基础



1. Vue 概述

   
  尤雨溪:Vue.js 的创建者

   2014 年 2 月, Vue.js 正式发布
   2015 年 10 月 27 日,正式发布 1.0.0
   2016 年 4 月 27 日,发布 2.0 的预览版本



Vue是什么 ?

  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的 渐进式框架
  • vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

使用 Vue 将 helloworld 渲染到页面上:

在这里插入图片描述




Vue:渐进式 JavaScript 框架



声明式渲染 → 组件系统 → 客户端路由 → 集中式状态管理 → 项目构建

官网:https://cn.vuejs.org/v2/guide/



  • 易用:熟悉 HTML 、 CSS 、 JavaScript 知识后,可快速上手 Vue;
  • 灵活:在一个库和一套完整框架之间自如伸缩;
  • 高效: 20kB 运行大小,超快虚拟 DOM。


2. Vue 基本使用


2.1 Vue安装

2.1.1 直接用 script 标签 引入

  • 开发环境 版本(包含了有帮助的命令行警告)

    // 制作原型或学习,可以使用最新版本:
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
  • 生产环境 版本(优化了尺寸和速度)

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

    对于 生产环境,推荐 链接明确的版本号 (避免新版本造成不可预期的破坏):

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    

2.1.2 NPM

构建 大型应用 时推荐使用 NPM 安装:

#最新稳定版
$ npm install vue

2.1.3 其它安装方式(略…)

更多 >> 访问 官方文档https://cn.vuejs.org/v2/guide/installation.html


2.2 与传统开发模式对比

  • 原生JavaScript

    <div id="msg"></div>
    <script type="text/javascript">
    	var msg = 'Hello World'
    	var div = document.getElementById('msg')
    	div.innerHTML= msg
    </script>
    

  • jQuery

    <div id="msg"></div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    	var msg = 'Hello World';
    	$('#msg').html(msg);
    </script>
    

  • Vue

    <div id="app">
    	<div>{{ msg }}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
    new Vue({
       el: '#app',
       data: {
       	  msg: 'HelloWorld'
    	}
    })
    </script>
    

2.3 Vue.js 之 HelloWorld 细节分析

2.3.1 Vue实例参数

  • el :元素的挂载位置(值可以是 CSS 选择器DOM 元素);

  • data :模型数据(值是一个 对象

    示例1:

    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
    

2.3.2 插值表达式的用法

  • 将数据填充到 HTML 标签中;

    示例2:

    <div id="app">
      {{ message }}
    </div>
    
    <!--输出 Hello Vue! -->
    
  • 插值表达式支持基本的计算操作


2.3.3 Vue代码运行原理

概述编译过程的概念( Vue 语法 → 原生语法)

Vue 代码
Vue框架
原生JavaScript



3. Vue模板语法


3.1 模板语法概述

3.1.1 理解前端渲染

在这里插入图片描述

3.1.2 前端渲染方式

  • 原生 js 拼接字符串;
  • 使用前端模板引擎;
  • 使用 vue 特有的模板语法。
  1. 原生js拼接字符串

    基本上就是将数据以字符串的方式拼接到 HTML 标签中,前端代码风格大体如下示。

    var d = data.weather;
    var info = document.getElementById('info');
    info.innerHTML = '';
    for(var i=0;i<d.length;i++){
    	var date = d[i].date;
    	var day = d[i].info.day;
    	var night = d[i].info.night;
    	var tag = '';
    	tag += '<span>日期:'+date+'</sapn><ul>'
    	tag += '<li>白天天气:'+day[1]+'</li>'
    	tag += '<li>白天温度:'+day[2]+'</li>'
    	tag += '<li>白天风向:'+day[3]+'</li>'
    	tag += '<li>白天风速:'+day[4]+'</li>'
    	tag += '</ul>';
    	var div = document.createElement('div');
    	div.innerHTML = tag;
    	info.appendChild(div);
    }
    

    缺点:不同开发人员的代码风格差别很大,随着业
    务的复杂,后期的维护变得逐渐困难起来。

  2. 使用前端模板引擎

    以下是基于模板引擎 art-template 的一段代码,与拼接字符串相比,代码明显规范了很多,它拥有自己的一套模板语法规则。

    <script id="abc" type="text/html">
    	{{if isAdmin}}
    		<h1>{{title}}</h1>
    		<ul>
    			{{each list as value i}}
    				<li> 索引 {{i + 1}}:{{value}}</li>
    			{{/each}}
    		</ul>
    	{{/if}}
    </script>
    

    优点: 大家都遵循同样的规则写代码,代码可读性明显提高了,方便后期的维护。

    缺点: 没有专门提供事件机制。

3.1.3 Vue模板语法概览

  • 差值表达式;
  • 指令;
  • 事件绑定;
  • 属性绑定;
  • 样式绑定;
  • 分支循环结构。

3.2 指令

3.2.1 什么是指令

指令本质 就是 自定义属性

Vue 中指令都是以 v- 开头(比如:v-cloak

官网:https://cn.vuejs.org/v2/api/#指令

3.2.2 v-cloak指令用法

  • v-cloak:防止页面加载时出现闪烁

    1)插值表达式存在的问题:“闪动”;
    2)如何解决该问题:使用 v cloak 指令;
    3)解决该问题的原理:先隐藏,替换好值之后再显示最终的值。

    示例如下

    <style type="text/css">
    	/*1、通过属性选择器 选择带有属性 v-cloak的标签,使其隐藏*/
    	[v-cloak]{
    		display: none; /* 元素隐藏 */
    	}
    </style>
    
    <body>
    	<div id="app">
    		<!-- 2、 让带有插值语法的元素添加 v-cloak 属性,在数据
    		渲染完场之后,v-cloak 属性会被自动去除,
    		v-cloak 一旦移除也就是没有这个属性了,属性选择器就选择不到该标签
    		对应的标签变为可见	-->
    		<div v-cloak> {{msg}} </div>
    	</div>
    
    	<script type="text/javascript" src="js/vue.js"></script>
    	<script type="text/javascript">
    		var vm = new Vue({
    			el: '#app',  // 指定挂载位置:元素id 为 app 的元素
    			data: {      // data 里存储的模型数据
    				msg: 'Hello Vue'
    			}
    		});
    	</script>
    </body>
    </html>
    

3.2.3 数据绑定指令

  • v-text 填充纯文本

    用于将数据填充到标签中,作用与插值表达式类似,但没有闪动问题。相比插值表达式更加简洁。

    如果数据中有HTML标签会将html标签一并输出。

    注: 此为 单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值。

    <div id="app">
    	<!--
    	注意:在指令中不要写插值语法 直接写对应的变量名称
    	在 v-text 中赋值时不要再写插值语法
    	-->
    	<p v-text="msg"></p>
    	<p>
    		<!-- Vue 中只有在标签的内容中才用插值语法 -->
    		{{msg}}
    	</p>
    </div>
    <script>
    	new Vue({
    		el: '#app',
    		data: {
    			msg: 'Hello Vue.js'
    		}
    	});
    </script>
    

  • v-html填充 HTML 片段

    用法和v-text相似,但是它可以将 HTML 片段填充到标签中。

    ① 存在安全问题;

    ② 本网站内部数据可以使用(一般只在可信任内容上使用 v-html),永不用在用户提交的内容上(来自第三方的数据不可以用)。

    示例

    <div id="app">
    	<p v-html="html"></p> <!-- 输出:html标签在渲染的时候被解析 -->
    	<p>{{message}}</p> <!-- 输出:<span>通过双括号绑定</span> -->
    	<p v-text="text"></p> <!-- 输出:<span>html标签在渲染的时候被源码输出</span> -->
    </div>
    
    <script>
    	let app = new Vue({
    		el: "#app",
    		data: {
    			message: "<span>通过双括号绑定</span>",
    			html: "<span>html标签在渲染的时候被解析</span>",
    			text: "<span>html标签在渲染的时候被源码输出</span>",
    		}
    	});
    </script>
    

    v-htmlv-text区别在于,v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当 html 标签解析。
    后输出。

  • v-pre填充原始信息

    • 显示原始信息跳过编译过程;
    • 跳过这个元素和它的子元素的编译过程;
    • 一些静态的内容不需要编译时,加这个指令可以加快渲染。

    示例

    <span v-pre>{{ this will not be compiled }}</span>
    <!-- 显示的是{{ this will not be compiled }} -->
    <span v-pre>{{msg}}</span>
    <!-- 即使data里面定义了msg这里仍然是显示的{{msg}} -->
    <script>
    	new Vue({
    		el: '#app',
    		data: {
    			msg: 'Hello Vue.js'
    		}
    	});
    </script>
    

3.2.4 数据响应式

  • 如何理解响应式

    ① html5 中的响应式(屏幕尺寸的变化导致样式的变化)

    ② 数据的响应式(数据的变化导致页面内容的变化)

  • 什么是数据绑定

    数据绑定:将数据填充到标签中

  • v-once 只编译一次

    即,显示内容之后不再具有响应式功能;

    执行 一次性 的插值【当数据改变时,插值处的内容不会继续更新】

    <!-- 即使data里面定义了msg 后期我们修改了,仍然显示的是--> 
    <!-- 第一次data里面存储的数据,即 Hello Vue.js --> 
    <span v-once>{{ msg}}</span>
    
    <script>
    	new Vue({
    		el: '#app',
    		data: {
    			msg: 'Hello Vue.js'
    		}
    	});
    </script>
    

3.3 双向数据绑定指令


3.3.1 什么是双向数据绑定

  • 当数据发生变化的时候,视图也就发生变化;

  • 当视图发生变化的时候,数据也会跟着同步变化。

    图示

    在这里插入图片描述

3.3.2 v-model 指令用法

<div id="app">
	<div>{{msg}}</div>
	<div>
		<!--输入框中内容改变的时候, 页面上的msg 会自动更新 -->
		<input type="text" v-model='msg'>
	</div>
</div>

注: v-model指令限制在 <input><select><textarea>components 中使用。


3.3.3 MVVM设计思想

  • M(model)
  • V(view)
  • VM(View Model)
    在这里插入图片描述

MVC 是后端的分层开发概念; MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel

  • m(model)
    数据层,Vue 中 数据层都放在 data 里面;
  • v(view / 视图)
    Vue 中 view 即 我们的 HTML 页面;
  • vm (view-model) 控制器 将数据和视图层建立联系
    vmVue实例 ,就是 vm

3.4 事件绑定

3.4.1 Vue如何处理事件?

  • v-on 指令:用来绑定事件

    形式如:v-on:click 简写为 @click;

    用法

    <input type='button' v-on:click='num++'/>
    

    简写形式

    <input type='button' @click='num++'/>
    

    在这里插入图片描述


    v-on事件函数中传入参数

    	<div id="app">
            <div>{{num}}</div>
            <div>
                <!-- 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数 -->
                <button v-on:click='handle1'>点击1</button>
                <!-- 2、如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,
        并且事件对象的名称必须是$event -->
                <button v-on:click='handle2(123,456,$event)'>点击2</button>
            </div>
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    num: 0
                },
                methods: {
                    handle1: function(event) {
                        console.log(event.target.innerHTML)
                    },
                    handle2: function(p, p1, event) {
                        console.log(p, p1)
                        console.log(event.target.innerHTML)
                        this.num++;
                    }
                }
            });
        </script>
    
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:上身试试 返回首页