vue入门手册

发布时间:2022-08-19 14:17

Vue.js

首先的看看最好的学习手册是https://cn.vuejs.org/ Vue.js 官方网站

Vue介绍

开发工程发展历史

vue入门手册_第1张图片
工程化演进:
vue入门手册_第2张图片
vue入门手册_第3张图片
通过前面的介绍,我们对目前的项目工程化有了大体了了解,那么其中,在第二阶段的工程化演进中,有一个重要的工程设计理念诞生,他就是著名的 MVC 设计模式,简单点,MVC 其实就是为了项目工程化的一种分工模式;
vue入门手册_第4张图片
MVC 中的最大缺点就是单项输入输出,所有的 M 的变化及 V 层的变化,必须通过 C 层调用才能展示;
为了解决相应的问题,出现了 MVVM 的设计思想,简单理解就是实想数据层与展示层的相互调用,降低业务层面的交互逻辑;后面再进行详细介绍;

Vue 介绍

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的 渐进式框架
注意:Vue是一个框架,相对于 jq 库来说,是由本质区别的;
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

0.2 Vue 初体验

直接下载引入:https://cn.vuejs.org/v2/guide/installation.html
vue入门手册_第5张图片
下载方便调试的开发版本
CDN 引入:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

示例:

直接引入

有vue.js文件,我们用script引入


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./vue.js">script>
    <title>Documenttitle>
head>
<body>
    <div id="div">
        {{shuju}}
    div>
body>
<script>
    var app = new Vue({
        el:'#div',
        data:{
            shuju:'我是一个div222'
        }
    });

    console.log(app);

   console.log(app.shuju);
script>
html>

console.log(app.shuju); 是vue对象实例化

CDN 加速:

https://www.bootcdn.cn/

<body>
    <div id="div">
        {{user_name}}
    div>
body>
// 两种引入方式,任意选择
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">script>
<script src="./vue.js">script>
<script>
    var app = new Vue({
        el:'#div',  // 设置要操作的元素
        // 要替换的额数据
        data:{
            user_name:'我是一个div222' 
        }
    })
script>

浏览器上打开该html,效果预览:
vue入门手册_第6张图片

学习Vue

基础知识 --> 项目 --> 构建工具 --> Vue其他相关技术

Vue 实例对象

每个 Vue 应用都是通过用 Vue 函数创建一个新的关于数据绑定与飞调用的 Vue 实例 开始的:
实例化语法:

var app = new Vue({
  // 选项
})
<body>
    <div id="div">
        {{shuju+2}}
        {{fun()}}
    div>
body>
<script>
    var app = new Vue({
        el:'#div',
        data:{
            shuju:1,
            fun:()=>{
                 2+3;
            }
        }
    });
    // 打印Vue实例对象
    console.log(app);
script>

在这里插入图片描述
vue入门手册_第7张图片

通过打印实例对象发现,其中 el 被Vue 放入了公有属性中,而data 则被放入了 私有属性中,而 data 中的数据,需要被外部使用,于是 Vue 直接将data 中的属性及属性值,直接挂载到 Vue 实例中,也就是说,data中的数据,我们可以直接使用 app.user_name 直接调用;

var app = new Vue({
    el:'#div',  // 设置要操作的元素
    // 要替换的额数据
    data:{
        user_name:'我是一个div222',
        user:222222
    }
})
console.log(app.user_name);

模板语法-插值

我们在前面的代码中,使用 {{}} 的形式在 html 中获取实例对象对象中 data 的属性值;
这种使用 {{}} 获取值得方式,叫做 插值插值表达式

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:

<span>Message: {{ msg }}span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。即便数据内容为一段 html 代码,仍然以文本内容展示

<body>
    <div id="div">
       文本插值 {{html_str}}
    div>
body>
<script>
    var app = new Vue({
        el:'#div',
        data:{
            html_str:'

Vue

' } }) script>

浏览器渲染结果:
在这里插入图片描述`

打开浏览器的 REPL 环境 输入 app.html_str = 'vue'
随机浏览器渲染结果就会改变: `
vue入门手册_第8张图片

使用 JavaScript 表达式

迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持,但是不能使用 JS 语句;
(表达式是运算,有结果;语句就是代码,可以没有结果)

<body>
    <div id="div" >
       {{ un > 3 ? '大' : '小'}}
       {{ fun() }}
    div>
body>
<script>
    var app = new Vue({
        el:'#div',
        data:{
            un:2,
            fun:()=> {return 1+2}
        }
    })
script>

在这里插入图片描述

模板语法-指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM;参考 手册 、 API

<body>
    <div id="div" >
        <p v-if="seen">现在你看到我了p>
    div>
body>
<script>
    var app = new Vue({
        el:'#div',
        data:{
            seen:false
        }
    })
script>

效果预览:
vue入门手册_第9张图片
这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素,即当seen 的值为true才显示出文字。

v-text / v-html 文本

https://cn.vuejs.org/v2/api/#v-text
https://cn.vuejs.org/v2/api/#v-html
示例1:

<body>
    
    <div id="div">  
        <p v-text="seen">p>
        <p v-html="str_html">p>
    div>
body>
<script>
    var app = new Vue({
        el:'#div',
        data:{
            seen:'

Vue

'
, str_html:'

Vue

'
, class:'dd', } })
script>

vue入门手册_第10张图片

注意:

  • v-text
    • v-text和差值表达式的区别
      • v-text 标签的指令更新整个标签中的内容(替换整个标签包括标签自身)
      • 插值表达式,可以更新标签中局部的内容

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号