Vue.js简介和入门使用

vuejs 简介

• Vue.js (vuejs.org)
• 渐进式 JavaScript 框架
• vuejs 是基于MVVM 思想的框架
• vuejs 是以数据驱动为主的框架
• vuejs 是以组件化进行开发的框架
• vuejs 是国人尤雨溪（尤大大，尤小石）进行开发的。

什么是渐进式？（vuejs）破坏性小，上手简单

渐进式是相对于另外一种开发思想（侵入式）来说。
渐进式指的是在使用该产品做开发的时候，不需要完全的去重构之前的代码结构，可以非常方便将该产品集成到自身的项目中。

什么是侵入式？（react）脚手架（命令行）封装性明显

侵入式指的是如果要使用这种产品去维护之前的老项目的话，没办法直接引入使用，必须要破坏老项目的结构。
意思就是以前的老项目必须要进行重构，没办法直接使用这种侵入的产品。

什么是 MVVM 开发思想？

MVVM 开发思想是前端近几年借鉴后端的 MVC 的开发思想引进的。

• M 是 Model 的简写，负责数据，在前端其表现形式就是一个js对象，一般称之为模型变量（数据）

• V 是 View 的简写，负责数据的展示和收集，在前端的表现形式就是一个 DOM 区域。

• VM 是 ViewModel 的简写，负责业务逻辑，在前端的表现形式就是当前的产品本身的一个实例对象，它以数据驱动作为指导思想，通过双向数据绑定进行数据的操作。

什么是 MVC 思想？

• M Model的简写，翻译 模型，负责对数据的操作
• V View的简写，翻译 视图（模板），负责页面的展示和数据的收集
• C Controller的简写 翻译 控制器，负责业务逻辑代码

之前做后端的某个功能开发的时候，第一步定义路由（url-----》控制器的方法----》是否调用模型----》是否调用视图----》模板引擎–》响应（HTML页面（前后端不分离 ssr）、json格式(前后端分离 bsr)））

一般把 MVC 这种开发思想也称之为 分层思想。主要是为了便于后期的维护和新功能的扩展。（分而治之）

什么是数据驱动？

数据驱动是相较于传统 web 开发里面的 dom 操作来说的，以前的web开发某个功能的时候，我们都是先进行dom选取，然后在进行业务代码，最后做dom更新。但是其实对开发本身来说，我们不应该关系dom操作，我们只需要去关心我们数据的流向，现在的一些新的框架基于数据流向进行实现，对于开发来说，无须关心底层的dom实现，我们只需要提供数据，框架本身会给我们进行dom操作。这种思想就是数据驱动思想。这种开发思想在目前的各类前端框架，乃至小程序产品里面都有体现。

什么是组件化开发思想？

组件化指的是在开发过程中，把一些可以复用的代码高度的抽象、提取出来，封装成一个一个的代码块，然后在其他的地方进行复用。这种思想叫做组件化。有点类似于乐高积木。并且基于该思想衍生出来非常多的前端的组件化ui库（vantui elementUI mintUI antd iview uview…）

vuejs 入门使用

vuejs 是一个js库，也可以叫做一个框架。

vuejs 目前来说出现过3个版本

• vuejs 1.x 过时（不使用）
• vuejs 2.x 大规模使用中（√）
• vuejs 3.x 新秀 （2020 9 正式发布）
  • 底层架构使用 Proxy api改写
  • 组合api
  • 函数式编程

安装

下载vue.js包

安装 — Vue.js (vuejs.org)

npm

npm install vue

CND

最新版本:

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

稳定版本：

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

使用

入门使用

main.js
只要运行vue项目，main.js就会执行

index.html > mian.js>App.vue

html

<! --1引入vuejs框架-->
<script src="./lib/vue.js"></script>
<script type="text/javascript">
    // 需要编译器
const vm = new Vue({
    el: '#app',// eL是eLement的简写，属性值是一个选择器，选择vuejs,管理的dom区域
    /*data 代表是我们开发中的业务数据*/
	data: {
        title: 'hi vuejs!'
	}
})

</script>

<!--2．需要在html区域定义一个 vuejs管理的dom区域，在该区域内我们可以使用vuejs语法-->
<div id="app">
<! --这个区域会交给vuejs管理插值表达式指令-->
< ! --4．使用的vues语法-->
<!--双大括号一般我们称之为插值表达式”语法，里面可以写vue构造函数 data对象属性里面的哪些属性信息--><h1>{{title}}</h1>
</ div>

插值表达式

<div id="app">
    <!--这个区域会交给vuejs管理 插值表达式 指令-->
    <!--4. 使用的 vuejs语法-->
    <!--双大括号一般我们称之为 插值表达式 语法，里面可以写Vue构造函数 data对象属性里面的哪些属性信息-->
    <!-- 插值表达式里面到底可以写什么？-->
    <h1>{{ title }}</h1>
    <hr>
    <h2>1. data对象里面的属性</h2>
    <p>{{ version }}</p>
    <hr>
    <h2>2. 四则运算 </h2>
    <p>{{ (1 + 1) + 3 * 4 - 4 }}</p>
    <p>{{ 10 - 1 }}</p>
    <p>{{ 2 * 3 }}</p>
    <p>{{ 20 / 4 }}</p>
    <p>{{ 20 % 3 }}</p>
    <hr>
    <h2>3. 比较运算</h2>
    <p>{{ 10 > 9 }}</p>
    <p>{{ 3 >= 9 }}</p>
    <hr>
    <h2>4. 逻辑运算</h2>
    <p>{{ true && true }}</p>
    <p>{{ true && false }}</p>
    <p>{{ true || false }}</p>
    <p>{{ !false }}</p>
    <p>{{ (10 > 3) && (4 > 0) }}</p>
    <hr>
    <h2> 5. 三目运算 </h2>
    <p>{{ age >= 18 ? '成年': '未成年'}}</p>
    <!--插值表达式里面除了可以写我们的字面量还可以写data对象里的属性，data对象里面的属性的数据类型，就是我们之前js里面的学习的数据类型都可以写-->
    <h2>6. ECMAScript函数使用</h2>
    <p>{{ parseInt( 1.23 ) }}</p>
    <p>{{ Math.random() }}</p>
    <p>{{ '*'.repeat(10) }}</p>
    <hr>
    <h2>7. 用户自定义的全局函数</h2>
    <!--无法使用-->
    <!--<p>{{ sum(1, 2) }}</p>-->
    <hr>
    <h2>8. 业务代码</h2>
    <!--无法使用-->
    <p>
        <!--{{ var number1 = 12; var number2 = 34; }}-->
    </p>
</div>

第七点第八点由于是注释了所以不显示，如果不注释页面为空，在页面检查里console报错

基本数据类型

<div id="app">
    <p>{{ title }}</p>
    <p>{{ isAdult ? '成年' : '未成年' }}</p>
    <p>{{ arr[0] }}</p>
    <p>{{ arr[1] }}</p>
    <p>{{ arr[2] }}</p>
    <!-- [ 12, 23, 34 ] 如果直接插入一个符合数据类型，调用符合数据类型的 toString()方法 稍后学习其他的指令才可以做符合数据类型的遍历-->
    <p>{{ arr }}</p>
    <hr>
    <p>{{ obj.id }}</p>
    <p>{{ obj.name }}</p>
    <!-- { "id": 1, "name": "andy" } -->
    <p>{{ obj }}</p>
    <hr>
    <p>{{ infos[0].id }}</p>
    <p>{{ infos[0]['name'] }}</p>
    <p>{{ infos }}</p>
</div>

const vm = new Vue({
        el: '#app', // el是element的简写，属性值是一个选择器，选择vuejs 管理的dom区域
        /* data 代表是我们开发中的业务数据*/
        /* data 一般我们称之为：模型、 模型数据 模型对象*/
        data: {
            // 模型里面的属性一般我们称之为 模型变量
            unknow: null,
            unknow1: undefined,
            unknow2: [],
            unknow3: {},
            title: 'hi vuejs!',
            isAdult: true,
            version: '2.6',
            age: 23,
            arr: [12, 23, 34],
            obj: {id: 1, name: 'andy'},
            infos: [{id: 1, name: 'andy'}, {id: 2, name: 'mark'}]
        },

    })

对于基本数据类型来说，我们可以使用插值表达式直接的输出
对于复合数据类型来说，目前只能做基本的打印原始的格式，对输出是不友好、后期学习遍历语法

复合数据类型

以 v- 作为前缀的 dom元素的属性，是由 vuejs提供的，扩展dom元素的属性。一般称之为 vuejs 的指令，指令就是 vuejs 提供的给元素新的属性行为。

v-for

列表渲染
v-for用于做复合数据类型的遍历操作
v-for使用的语法 类似 js里面的 for…in语法

	<p>遍历获取元素</p>
    <p v-for="ele in arr">{{ ele }}</p>
    <hr>
    <p>遍历获取下标和元素</p>
    <p v-for="(ele, index) in arr">下标：{{ index }}， 元素：{{ ele }}</p>
    <hr>
    <h2>v-for遍历对象操作</h2>
    <p v-for="val in obj">{{ val }}</p>
    <p v-for="(val, attr) in obj">属性：{{ attr }}，属性值:{{ val }}</p>
    <hr>
    <h2>v-for遍历对象数组</h2>
    <p v-for="ele in infos">
        <span>{{ ele.id }}</span>
        <span>{{ ele.name }}</span>
    </p>

ele in arr：ele的名字是可以自己取的，代表数组中的元素，in 后面的模型变量不能乱写
(val, attr) in obj：val代表值，attr代表属性，用（item，index）也是可以的


vuejs 里面除了提供 v-for指令 还提供了一系列的指令方便开发者使用
v-for API

v-html

<! -- v-htmL底层的逻辑dom.innerHTML = titLe-->
<! -- v-text底层的逻辑dom.innerText = title-->
<p v-html="title"></p>
<p v-text="title"></p>
<p v-htm1="title">标题:</p>
<p>注意1:如果使用v-html或者 v-text ，标签内部不要存放信息，不然会覆盖</p>
<p v-htm1="'标题:'+title"></p>

插值表达式使用的好好的，为什么要引入 v-html指令？

前端为了安全，会对HTML代码进行实体转义。转义之后HTML代码里面的标签就失效了，原封不动的显示，而不会被浏览器语义化当成HTML标签

<div>{{ message }}</div>
<hr>
<div v-html="message"></div>

const vm = new Vue({
        el: '#app',
        data: {
            // 模型里面的属性一般我们称之为 模型变量
            /*后台：富文本编辑器，内容是包含了HTML代码 */
            /* 富文本编辑器 百度 Ueditor*/
            /* https://github.com/fex-team/ueditor */
            message: `<div class="navbar navbar-inverse navbar-fixed-top ue-docs-nav" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/ueditor" class="navbar-brand">UEditor Docs</a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li>
                    <a href="http://ueditor.baidu.com/website/onlinedemo.html" target="_blank">演示</a>
                </li>
                <li>
                    <a href="http://ueditor.baidu.com" target="_blank">官网</a>
                </li>
                <li>
                    <a href="https://github.com/fex-team/ueditor/issues" target="_blank">论坛</a>
                </li>
            </ul>
        </nav>
    </div>
</div>`,
        },
    })

v-bind

单向属性绑定(用于设置HTML属性)
v-bind :属性名= ’ 数据 ’
:bind :属性名 = ’ 数据 ’ （简写）

	<img v-bind:src="bdLogoImgUrl" alt="">
    <hr>
    <p>简化写法</p>
    <img :src="bdLogoImgUrl" alt="">

const vm = new Vue({
        el: '#app',
        data: {
            bdLogoImgUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
	}
}）

除了绑定src还能绑定样式和class

<style>
        .p1 {
            background-color: red;
        }
        .p2 {
            color: blue;
        }
</style>

<p>样式的绑定</p>
    <!--<p class="p1">Lorem ipsum dolor sit amet, consectetur.</p>-->
    <p v-bind:class="class1">Lorem ipsum dolor sit amet, consectetur.</p>
    <p :class="class1">Lorem ipsum dolor sit amet, consectetur.</p>

    <p :class="classNameArr">Lorem ipsum dolor sit amet, consectetur.</p>
    <p :class="['p1', 'p2']">Lorem ipsum dolor sit amet, consectetur.</p>
    <p :class="classNameObj">Lorem ipsum.</p>

const vm = new Vue({
        el: '#app',
        data: {
            class1: 'p1',
            classNameArr: ['p1', 'p2'],
            classNameObj: {'p1': true, 'p2': true},
            //true 显示 false 不显示
	}
}）

v-on

指令用于绑定HTML事件可以 如果绑定多个事件，可以用键值对的形式 事件类型：事件名
如果绑定是多个相同事件，直接用逗号分隔就行

<div id="app">
    <!-- v-on: 后面的值就是原生的 js事件不需要加上 on前缀 onClick-->
    <button v-on:click="handlerClick">点击我</button>
    <button v-on:click="handlerClick()">点击我</button>
    <button v-on:click="handlerClick($event)">点击我</button>
    <button v-on:click="handlerClick($event, '用户自定义的属性1', '第三个参数')">点击我</button>
    <hr>
    <!--@ == v-on:简化写法-->
    <button @click="handlerClick($event, '用户自定义的属性1', '第三个参数')">点击我</button>
    <hr>
    用户名：<input type="text" @change="handlerChange">
    <hr>
    邮箱：<input type="text" @keyup="handlerKeyup">
</div>

methods: {
            handlerChange() {
                console.log('handlerChange');
            },
            handlerKeyup() {
                console.log('handlerKeyup');
            },
            /* es6对象简化写法*/
            handlerClick(event, ...args) {
                /* ... es6里面的剩余参数*/
                console.log(event.target, args); // 当前的 dom对象
                // alert('我被点击了！');
            }
        } // 定义事件的回调函数

v-mode

双向绑定
v-model 用于表单信息的接收

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

data: {username: '初始化的默认值'}

v-if 和 v-show

v-if

条件渲染

<h2>v-if和v-show</h2>
<p v-if="showStatus">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<hr>
<p v-if="showStatus">v-if如果为真，则显示</p>
<p v-else>v-if如果为假 else里面的东西展示</p>
<hr>

data: {showStatus: true}

---

data: {showStatus: false}

v-show

显示和隐藏，display：none 和 display：block

<h2 v-show="showStatus">v-show</h2>

data: {showStatus: false}
//true则显示 false不显示

v-if和v-show有什么区别？

• 相同点：可以控制dom元素的显示与否
• 区别：v-if是控制dom元素的移除与新增;
  v-show是控制元素显示与隐藏的 display属性的值为：none或者block
  用户如果切换频繁状态应该用v-show
  如果页面是刷新进入页面状态那么v-show的性能差一点

显示：

不显示：

计算属性

模板语法内如果添加特别复杂的逻辑，会让模板表达式比较重而且难以维护，对于任何复杂逻辑，都应当使用计算“属性”

<div id="app">
{{changeStr}}
</div>

<script>
export default {
	name: 'App' ,
	data () {
		return {
		str: '123'}
		},
	//计算属性写法！ 一定要有return
	computed:{
		changeStr(){//不是函数是属性！
		return this.str.split('').reverse().join('');
	}
}}
</script>

计算属性（computed）是基于他们的响应式依赖进行缓存的

class

对象的写法
:class='{active: false,on:true} '
数组的写法
<div :class=' [activeclass,onClass]'></div>
经常用来各种判断赋值的
:class=' currentIndex==index ? "active" :" " '

style

某一个或者某几个值发生变化的时候

<div :style='styleclass'>这是style的写法</div>
	data(){
		return {
			styleclass:{
				background: ' blue' ,
				fontSize: ' 50px',
				color: 'orange'
			}
		}
	}

src路径

img :src 一旦是绑定的数据，那么他会类似于请求的数据了，需要从路径上查找
<img src="./assets/img/logo.png"> ==>src目录
<img :src="">===>public目录

vue项目自适应

全局引入在main.js里，局部在.vue里
import './assets/js/flexible.js'

1.如果是局部引入(单独的某一个页面生效).vue文件中引入
2.如果是全局引入(在main.js中引入)