05、Vue基础（html中使用vue）

Vue官网：点击链接1、Vue简介Vue，读音类似于view，是一套用于构建用户界面的渐进式的js框架，发布于2014年2月；Vue结合了HTML+CSS+JS，有很好的生态系统，Vue体积小，速度快，优化到位，与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用；Vue的核心库只关注视图层，易于上手，便于与第三方库（如：vue-router，vue-resourc...

nikeylee

9195人浏览 · 2020-04-20 15:18:46

nikeylee · 2020-04-20 15:18:46 发布

一、Vue介绍

Vue简介

Vue，读音类似于view，是一套用于构建用户界面的渐进式的js框架，发布于2014年2月；
Vue结合了HTML+CSS+JS，有很好的生态系统，Vue体积小，速度快，优化到位，
与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用；
Vue的核心库只关注视图层，易于上手，便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目（SSM）整合；

二、MVVM

1、MVVM模式的实现者--双向数据绑定模式

Model：模型层，这里表示JavaScript对象；
View：视图层，这里表示DOM（HTML操作的元素）
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者；

MVC： M model V view C controller

MVVM：M model V view VM viewmodel：连接视图和数据的中间件

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，ViewModel定义了一个Observer观察者：

ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新；（发现数据变了，通知视图变化）
ViewModel 能够监听到视图的变化，并能够通知数据发生改变；（发现视图变了，通知数据变化）
Vue.js是一个MVVM的实现者，核心是实现了DOM监听与数据绑定；
通过VM实现了双向数据绑定；

其他MVVM实现者：

AngularJS
ReactJS
微信小程序

要想在页面里面使用vue框架（vue是js框架），要在页面中引入vue的js文件，在页面中引入vue两种方式：

1）引入工程内的vue的js文件

2）引入外部网络提供的vue的js文件，最好使用离服务器较近的cdn（内容分发网络）的vue.js

cdn内容分发网络

是一种加速策略，能够从离自己最近的服务器上快速的获得外部的资源

组件化

页面上每个独立的可交互的区域视为一个组件；
每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护；
页面不过是组件的容器，组件可以嵌套自由组合（复用）形成完整的页面；

三、快速开始

1、在页面引入vue的js文件

注意：cdn是一种加速策略，能够快速的提供js文件

获取vue的cdn文件：https://www.bootcdn.cn/vue/

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2、在页面中绑定vue元素

创建一个div，id是app；

3、创建vue对象，设计对象的内容

其中该vue对象，绑定了页面中id是app的那个div；没有被绑定的div，是不能被vue操作的；

4、在页面的元素中，使用插值表达式，来使用vue对象中的内容

在html的被vue绑定的元素中，通过插值表达式来获取vue对象中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门</title>
    <!--样式设置-->
    <style type="text/css">
        p.tip span {
            font-weight: bold;
            color: #cf3b5c;
        }
    </style>
</head>

<body>
<div id="app">
    <h1>我的静态页面1</h1>
    <span>
        {{title}}
    </span>
    <input type="text" v-model="title"/>

    <p>欢迎你，年龄是{{age}}的{{name}}</p>
    <!--p，段落；span，给行内元素设置样式-->
    <p class="tip"><span>提示：</span>... ... ...</p>
</div>
</body>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>

<script>
    // 该vue对象，绑定了页面中id是app的那个div
    new Vue(
        {
            el: '#app', //element
            // 数据哪里来？
            data: {
                title: 'hello nikey',  //以后，数据是通过发送ajax请求，来获得的
                name:'小明',
                age:18
            }
        } // json格式的对象，使用大括号包裹，里面放了键值对，在js中键可以没有引号，多个键值对之间使用，分隔
    );
</script>

</html>

效果：在input输入框中输入文字，<span>行内元素｛｛title｝｝的值动态变化；

vue对象里有哪些东西，分别是什么作用？

new Vue({

el:'' 该vue对象绑定在哪个div上

data:{

} 提供数据的，里面存放键值对

});

四、差（插）值表达式

作用：在view中，获得model中的内容；

差值表达式，是用在html中被绑定的元素中的，目的是通过差值表达式来获取vue对象中的属性和方法；

语法格式：｛{vue的内容}}

注意：差值表达式不能写在html的标签中，不能作为属性的值的部分；

vue对象中的属性是哪里提供的？

new Vue（{
data:{} <==这个data就提供了属性
}）

vue对象中的方法是哪里提供的？

new Vue（{
   methods:{   <==这个methods提供了方法
       sayHi:function(){
       }
   }
}）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>差值表达式</title>
</head>

<body>
<div id="app">
    我是一位{{major}}的程序员<br/>
    {{[0,1,2,3,4][1]}}<br/>
    {{ {name:'小明',age:20}.name }}<br/>
    {{ sayHi() }}
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>

<script>
    new Vue(
        {
            el: '#app',
            data: {
                major:'java'
            },
            methods:{
                sayHi:function(){
                    alert("hello vue!");
                    return "hello vue2";
                }
            }
        }
    );
</script>

</html>

五、Vue中的关键字

这些关键字，都是作为html页面的标签中的属性；

1、MVVM双向数据绑定：v-model

将标签的value值与vue实例中的data属性值进行绑定；

<input type="text" v-model="major"/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的关键字v-model</title>
</head>

<body>
<div id="app">
    请输入您的专业：<input type="text" v-model="major"/>
    <p>我的专业是:  {{major}}</p>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>

<script>
    new Vue(
        {
            el: '#app',
            data: {
                major:'java'
            }
        }
    );
</script>

</html>

效果：在输入框输入javaweb，下面的专业也在变化

2、事件绑定：v-on

通过配合具体的事件名，来绑定vue中定义的方法;

v-on，是绑定事件；事件是input；响应行为是changeMajor；
当input元素发生输入事件时，就会调用vue里定义的changeMajor方法

<input type="text" v-on:input="changeMajor"/>

在响应函数里，可以指明使用event内置的参数对象;
event.target.value 获取当前事件的对象（input元素）的value值；
此时的this，指的是当前vue对象；如果在method里想使用当前vue对象的属性和方法，必须加上this；

changeMajor:function (event) {
        this.major = event.target.value;
}

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue中的关键字v-on</title>
</head>

<body>
<div id="app">
    请输入您的专业：    <input type="text" v-on:input="changeMajor"/><br/>
    我的专业是：  {{major}}

</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>

<script>
    new Vue(
        {
            el: '#app',
            data: {
                major:''
            },
            methods:{
                changeMajor:function (event) {
                    this.major = event.target.value;
                }
            }
        }
    );
</script>

</html>

3、事件绑定简化版：使用@替换v-on:

<input type="text" @input="changeMajor"/>

<input type="text" v-on:input="changeMajor"/>

4、HTML标签（属性的内容）绑定vue的属性：v-bind

html里的所有属性，都不能使用插值表达式；下面的写法是错误的：

<a href="{{link}}">百度</a>

如果一定要用vue中的属性作为html标签的属性的内容，可以通过v-bind进行属性绑定；

v-bind:href 可以简写成 :href

<div id="app">
    <a href="https://www.baidu.com/">百度1</a><br/>
    <a v-bind:href="link">百度2</a><br/>
    <a :href="link">百度3</a>
</div>

<!DOCTYPE html>
<html lang="en"  xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue中的关键字v-bind</title>
</head>

<body>
<div id="app">
    <a href="https://www.baidu.com/">百度1</a><br/>
    <a v-bind:href="link">百度2</a><br/>
    <a :href="link">百度3</a>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>

<script>
    new Vue(
        {
            el: '#app',
            data: {
                link:'https://www.baidu.com/'
            }
        }
    );
</script>

</html>

点击链接，都可以跳转到百度网页：

5、差值表达式只获取一次数据：v-once

该标签中的差值表达式，只获取一次数据，之后数据的变化，不影响此差值表达式的值；

<span v-once>{{major}}</span>

<!DOCTYPE html>
<html lang="en"  xmlns:v-once="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue中的关键字v-once</title>
</head>

<body>
<div id="app">
    请输入您的专业：    <input type="text" v-model="major"/><br/>
    我的专业1：   <span>{{major}}</span><br/>
    我的专业2：   <span v-once>{{major}}</span>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>

<script>
    new Vue(
        {
            el: '#app',
            data: {
                major:'java'
            }
        }
    );
</script>

</html>

6、v-html 和 v-text

v-html：与innerHTML功能相似；html的标签会被解析；将vue中的属性的值作为html的元素来使用；

<p v-html="finishedlink"></p>

v-text：文本显示，html标签不被解析；将vue中的属性的值只作为纯文本来使用；

<p v-text="finishedlink"></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的关键字v-html和v-text</title>
</head>

<body>
<div id="app">
    <p v-html="finishedlink"></p>
    <p v-text="finishedlink"></p>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>

<script>
    new Vue(
        {
            el: '#app',
            data: {
                finishedlink:"<a href=\"https://www.baidu.com/\">百度1</a><br/>"
            }
        }
    );
</script>

</html>

六、事件

1、事件绑定

功能：点击按钮，数字自增1；

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件绑定范例</title>
</head>

<body>
<div id="app">
    <button type="button" @click="addbtnfn">增加</button>
    <p> {{counter}} </p>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>

<script>
    new Vue(
        {
            el: '#app',
            data: {
                counter:0
            },
            methods:{
                addbtnfn:function () {
                    this.counter += 1;
                }
            }
        }
    );
</script>

</html>

2、参数传递

3、停止鼠标事件

4、事件修饰符

七、vue改变内容--虚拟dom和diff算法

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^