Vue 详解

最新推荐文章于 2024-01-13 18:22:10 发布

Charles.启明

最新推荐文章于 2024-01-13 18:22:10 发布

阅读量781

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_42145230/article/details/105415222

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

中文官网
 英文官网

Vue是什么？

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

Vue.js的优点

1.编码简洁，体积小运行效率高，适合移动/PC端开发：压缩后33k
2.更高的运行效率：基于虚拟dom，一种可以预先通过javaScript进行各种计算，把最终dom操作计算出来并优化的技术，由于这个Dom操作预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。
3.双向数据绑定：让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上。
4.生态丰富、学习成本低
5.遵循MVVM模式
6.它本身只关注UI，可以轻松引入vue插件或其他第三方库开发项目

搭建Vue环境

安装Vue可以使用<script>标签引用，也可以使用CDN方法，感兴趣的童鞋可以去查阅。这里着重整理npm的安装方法，因为npm能很好的和Webpack等模块配合使用，在用Vue.js构建大型应用时推荐使用npm安装方法。

Vue运行环境的搭建需要具备的东西：

node.js环境：npm包管理器
cnpm：npm的淘宝镜像
vue-cli：脚手架构建工具

node.js 我们可以在官网下载，然后一路next安装就ok了，必要的话更改安装路径。安装完成后，可以在电脑上打开命令行工具（win+R），输入node -v命令，查看node的版本，如果出现相应的版本号，则说明安装成功了。

note：npm包管理器是集成在node中的，安装了node也就有了npm，输入npm -v命令，会显示npm的版本信息。

cnpm的安装
在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org ,等待其安装完毕。没有报错则表明安装成功。

vue-cli的安装
在命令行输入npm install -g vue-cli，等待安装完成。

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

1.普通页面，引入vue.js: <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>即可实现vue
实例演示，自己建立html文件然后copy代码
MVVM
M: data，数据模型，数据对象 model
V: view视图展示，模板页面
VM: viewmode 视图模型（Vue的实例）（页面监听，数据绑定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
1.引入vue.js: <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.创建vue对象
    el:指定根element(选择器)
    data:初始化数据(页面可以访问)
3.双向数据绑定:v-model
    数据绑定：数据在页面与内存中的变量自动转移
    双向数据绑定：如果2个方向数据都可以自动转移
4.显示数据:{{xxx}}
5.理解vue的MVVM实现


1.模板的理解:
    动态的html页面
    包含了一些JS语法代码
        双大括号表达式
        指令(v-开头的自定义标签属性)
2.双大括号表达式
    语法：{{exp}}或{{{exp}}}
    功能：向叶面输出数据
    可以调用对象的方法
3.指令一：强制数据绑定
    功能：指定变化的属性值
    完整写法：
        v-bind:xxx='yyy'  //yyy会作为表达式解析执行
    简洁写法：
        :xxx=‘yyy’
4.指令二：绑定事件监听
    功能：绑定指定事件名的回调函数
    完整写法：
    v-on:click=‘’
    缩写
    @click='xxx'
-->
<body>
    <div id="app">
        <input type="text" v-model="username">
        <p>Hello {{username}}</p>
        <p>双大括号：{{username.toUpperCase()}}</p>
        
        
        <h2>指令1：强制数据绑定</h2>
        <img src="imgUrl">
        <img :src="imgUrl">


        <h2>指令2：绑定事件监听</h2>
        <button v-on:click="test">test</button>
        <button @click="test2('Baby')">test2</button>
    </div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 创建vue实例, Vue是一个vue.js库提供的构建函数
    var app = new Vue({// 配置对象(属性名必须是指定的一些名称)
        el: '#app',// element :选择器字符串   表明将页面哪个元素交给vue管理
        data:{// 数据(model)
            username: 'Baby!',
            imgUrl: 'https://cn.vuejs.org/images/logo.png'
        },
        methods: {
            test() {
                alert("Hello KuGou!")
            },
            test2(content){
                alert(content)
            }
        }
    })
/**
 * MVVM
 * M: data，数据模型，数据对象 model
 * V: view视图展示，模板页面
 * VM: viewmode 视图模型（Vue的实例）（页面监听，数据绑定）
 */
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性和监视</title>
</head>
<body>
<!--
1.计算属性
    在computed属性对象中定义计算属性的方法
    在页面中使用{{方法名}}来显示计算的结果
2.监视属性
    通过Vm对象的$watch()或wacth配置来监视指定的属性
    当属性变化时，回调函数自动调用，在函数内部进行计算
3.计算属性高级：
    通过getter/setter实现对属性数据的显示和监视
    计算属性存在缓存，多次读取只执行一次getter计算
-->
    <div id="demo">
        姓：<input type="text" placeholder="First name" v-model="firstName"><br>
        名：<input type="text" placeholder="Last name" v-model="lastName"><br>
        姓名1(单向)：<input type="text" placeholder="full name1" v-model="fullName1"><br>
        姓名2(单向)：<input type="text" placeholder="full name2" v-model="fullName2"><br>
        姓名3(双向)：<input type="text" placeholder="full name3" v-model="fullName3"><br>

        <p>{{fullName1}}</p>
        <p>{{fullName1}}</p>
        <p>{{fullName1}}</p>
    </div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#demo',
        data:{
            firstName:'A',
            lastName:'B',
            //fullName1:'A B'
            fullName2:'A B',
        },
        computed: {
            // 什么时候执行，初始化显示/相关的data属性数据发生改变
            // 计算并返回当前属性的值
            fullName1(){// 计算属性中的一个方法，方法的返回值作为属性值
                console.log('fullName1()')
                return this.firstName + ' ' + this.lastName;
            },
            fullName3:{
                // 1.你定义的2.你没有调用3.但最终它执行了
                // 2.什么时候调用？ 2.用来做什么
                // 回调函数  当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
                get(){
                    return this.firstName + ' ' + this.lastName
                },
                // 回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
                set(value){// value就是fullName3的最新属性值
                    var name = value.splice(' ')
                    this.firstName = name[0]
                    this.lastName = name[1]
                }
            }
        },
        watch:{// 配置监视
            firstName: function (value) {//firstName发生了改变
                console.log(this)// 就是vm对象
                this.fullName2 = value + ' ' + this.lastName
            }
        }
    })
    vm.$watch('lastName', function (value) {
        // 更新fullName2
        this.fullName2 = this.firstName + ' ' + value
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class与style绑定</title>
    <style>
        .aClass{
            color: red;
        }
        .bClass{
            color: blue;
        }
        .cClass{
            font-size: 20px;
        }
    </style>
</head>

<body>
<!--
1.理解
    在应用界面中，某个(些)元素的样式是变化的
    class/style绑定就是专门来实现动态样式效果的技术
2.class绑定：：class=‘xxx’
    xxx是字符串
    xxx是对象
    xxx是数组
3.style绑定
    :style={ color:activeColor,fontSize:fontSize+'px'}
    其中activeColor/fontSize是data属性
-->
    <div id="demo">
        <h2>1.class绑定:: class='xxx'</h2>
        <p class="cClass" :class="a">xxx是字符串</p>

        <p :class="{aClass:isa,bClass:isb}">xxx是对象</p>

        <p :class="['aClass','cClass']">xxx是数组</p>

        <h2>2.style绑定</h2>
        <p :style="{color: activeColor, fontSize: fontSize + 'px'}">:style={ color:activeColor,fontSize:fontSize+'px'}</p>


        <button @click="update">更新</button>
    </div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
    el: '#demo',
    data:{
        a: 'aClass',
        isa: true,
        isb: false,
        activeColor: 'red',
        fontSize: 20
    },
    methods:{
        update(){
            this.a = 'bClass'
            this.isa = false
            this.isb = true
            this.activeColor = 'green'
            this.fontSize = 30
        }
    }
})
</script>
</body>
</html>

v-html:
v-text:

Vue扩展插件

1.vue-cli:vue 脚手架
2.vue-resource(axios):ajax请求
3.vue-roter:路由
4.vuex:状态管理
5.vue-lazyload:图片懒加载
6.vue-scroller:页面滑动相关
7.mint-ui:基于vue的UI组件库(移动端)
8.element-ui:基于vue的UI组件库(PC端)

目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： - assets:放置一些图片，如logo等 - components:目录里面放了一个组件文件，可以不同 - App.vue:项目入口文件，我们也可以直接将组件写这里，而不使用components目录 - main.js:项目的核心文件
static	静态资源目录，如图片、文字等
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等
index.html	首页入口文件，你可以添加一些meta信息或统计代码啥的
package.json	项目配置文件
Readme.md	项目的说明文档，markdown格式

VUE内嵌指令

v-model: 数据绑定
data: 返回对象用 return
v-for: 循环格式 v-for=“字段名 in(of) 数组json”
v-show: 显示隐藏传递的值为布尔值 true false 默认为false
v-if: 显示与隐藏和v-show对比的区别就是是否删除dom节点默认值为false
v-else-if: 必须和v-if连用
v-else: 必须和v-if连用不能单独使用否则报错模板编译错误
v-bind: 动态绑定作用：及时对页面的数据进行更改
v-on: 绑定事件函数必须写在methods里面
@click: 快捷方法
v-text: 解析文本
v-html: 解析html标签
v-bind:class: 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三目型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
v-once: 进入页面时只渲染一次不在进行渲染
v-cloak: 防止闪烁
v-pre: 把标签内部的元素原位输出

用法

v-text

v-text主要用来更新textContent，等同于JS的text属性。
<span v-text="msg"></span>

这两者等价：
<span>{{msg}}</span>

v-html

双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
<div v-html="Hello Baby！"></div>
这个div的内容将会替换成属性值Hello Baby！，直接作为HTML进行渲染。

v-pre

v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
<div id="app">
    <span v-pre>{{msg}}</span>  //这条语句不进行编译
    <span>{{msg}}</span>
</div>
最终仅显示第二个span的内容

v-cloak

这个指令是防止闪现
<div id="app" v-cloak>
    <div>
        {{message}}
    </div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
</script>
在页面加载时会闪烁，先显示:
<div>
    {{message}}
</div>

然后才会编译为：
<div>
    hello world!
</div>

v-once

v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
<span v-once>This will never change:{{msg}}</span>  //单个元素
<div v-once>//有子元素
    <h1>comment</h1>
    <p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component>  //组件
<ul>
    <li v-for="i in list">{{i}}</li>
</ul>
上面的例子中，msg,list即使产生改变，也不会重新渲染。

v-if

v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
<a v-if="ok">yes</a>
如果属性值ok为true，则显示。否则，不会渲染这个元素。

v-else

v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
<a v-if="ok">yes</a>
<a v-else>No</a>

v-else-if

v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。
<div v-if="type==='A'">
    A
</div>
<div v-if="type==='B'">
    B
</div>
<div v-if="type==='C'">
    C
</div>
<div v-else>
    Not A,B,C
</div>

v-show

<h1 v-show="ok">hello world</h1>

也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。

注意：v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

v-for

用v-for指令根据遍历数组来进行渲染
有下面两种遍历形式
<div v-for="(item,index) in items"></div>   //使用in，index是一个可选参数，表示当前项的索引
<div v-for="item of items"></div>   //使用of

下面是一个例子，并且在v-for中，拥有对父作用域属性的完全访问权限。
<ul id="app">
    <li v-for="item in items">
        {{parent}}-{{item.text}}
    </li>
</ul>
<script type="text/javascript">
    var example = new Vue({
      el:'#app',
      data:{
        parent:'父作用域'
        items:[
          {text:'文本1'},
          {text:'文本2'}
        ]
      }
    })
</script>

会被渲染为：
<ul id="app">
    <li>父作用域-文本1</li>
    <li>父作用域-文本2</li>
</ul>
注意：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

v-bind

v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【  ：】
<1>对象语法：
//进行类切换的例子
<div id="app">
    <!--当data里面定义的isActive等于true时，is-active这个类才会被添加起作用-->
    <!--当data里面定义的hasError等于true时，text-danger这个类才会被添加起作用-->
    <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,  
            hasError: false
        }
    })
</script>

渲染结果：
<!--因为hasError: false，所以text-danger不被渲染-->
<div class = "is-active"></div>

<2>数组语法
<div id="app">
    <!--数组语法：errorClass在data对应的类一定会添加-->
    <!--is-active是对象语法，根据activeClass对应的取值决定是否添加-->
    <p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            activeClass: false,
            errorClass: 'text-danger'
        }
    })
</script>

渲染结果：
<!--因为activeClass: false，所以is-active不被渲染-->
<p class = "text-danger"></p>

<3>直接绑定数据对象
<div id="app">
    <!--在vue实例的data中定义了classObject对象，这个对象里面是所有类名及其真值-->
    <!--当里面的类的值是true时会被渲染-->
    <div :class="classObject">12345</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            classObject:{
                'is-active': false,
                'text-danger':true
            }           
        }
    })
</script>

渲染结果：
<!--因为'is-active': false，所以is-active不被渲染-->
<div class = "text-danger"></div>

v-model

这个指令用于在表单上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
<div id="app">
    <input v-model="somebody">
    <p>hello {{somebody}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            somebody:'小明'
        }
    })
</script>

这个例子中直接在浏览器input中输入别的名字，下面的p的内容会直接跟着变。这就是双向数据绑定。
v-model修饰符
<1>  .lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。
<input v-model.lazy="msg">

<2>  .number
自动将用户的输入值转化为数值类型
<input v-model.number="msg">

<3>  .trim
自动过滤用户输入的首尾空格
<input v-model.trim="msg">

v-on

v-on主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。
简写为：【  @  】
<div id="app">
    <button @click="consoleLog"></button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods:{
            consoleLog:function (event) {
                console.log(1)
            }
        }
    })
</script>

事件修饰符


.stop  阻止事件继续传播

.prevent 事件不再重载页面

.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

.self 只当在 event.target 是当前元素自身时触发处理函数

.once 事件将只会触发一次

.passive 告诉浏览器你不想阻止事件的默认行为

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
GitHub示例地址
不断优化中…

Charles.启明

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 详解

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

扫一扫

专栏目录