初识 Vue（快速入门）

最新推荐文章于 2021-09-27 14:08:38 发布

清风挽歌

最新推荐文章于 2021-09-27 14:08:38 发布

阅读量152

点赞数 1

分类专栏：学习Vue 文章标签： vue js vue.js 前端 javascript

本文链接：https://blog.csdn.net/zxy144/article/details/109615036

版权

学习Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue.js是一个优秀的前端JavaScript框架

随着项目场景的复杂化和综合化，传统模式（html(jsp)+jquery）已经无法满足需求，就出现了一些前端框架，他们满足了企业的需求，更加易用、灵活、高效

三大主流的前端框架：

angular（最早的前端框架）
react（上手有些难度，设计的比较优秀）
vue（最简单，最容易上手，中国人开发的，现在很火的一个前端框架）

Vue最大程度上的解放了DOM操作，而且能够完成单页web项目开发

Vue的核心特征：

双向数据绑定
通过指令扩展HTML，通过表达式绑定数据到HTML
解耦视图与数据
可复用组件
数据驱动视图
虚拟DOM

在后续的学习中，慢慢的体会vue的这些特征

官网介绍：

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

快速入门Vue

Hello Vue

官网下载：https://cn.vuejs.org/v2/guide/installation.html

创建index.html，并引入vue.js
实例化Vue对象，var app = new Vue({参数名:值···});
定义div，并指定id选择器
在div中使用{{}}引用data中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="box1"> {{message}}</div>
<script>
    var app = new Vue({
        el:'#box1',
        data:{
            message:'hello vue!'
        }
    })
</script>
</body>
</html>

Vue实例中的参数

el

el作用：指定当前Vue实例所管理的视图，值通常是id选择器，也可以类选择器

（el的值不能是html标签选择器）

data

data作用：指定当前Vue实例的数据对象

data中数据是响应式数据
值可以是一个对象
所有数据部分都写在data中
在当前Vue实例所管理的视图中，可以直接通过数据名使用data中的数据
可以在js中通过对象名.$data.属性名访问数据
可以在js中通过对象.属性访问数据

<div id="box1">
<!--    直接Vue实例中data的数据-->
    {{message}}
</div>
<script>
    var app = new Vue({
        el:'#box1',
        data:{
            message:'hello vue!'
        }
    })
    // 在js中使用
    console.log(app.$data.message)
    console.log(app.message)
</script>

template

template作用：可以通过template向元素中插入内容（插入的内容只能有一个子标签，插入的内容可以使用反引号 `` 包裹）

<div id="box1">{{template}}</div>

<script>
    var app = new Vue({
        el:'#box1',
        template:`
        <div>
          <h3>三级标题</h3>
          <p>一个段落</p>
        </div>
        `
    })
</script>

（使用template之后，会替换掉该元素中原有的内容）

methods

methods作用：定义一些当前vue实例中的方法

<div id="app">
{{info}}
</div>
<input type="submit" value="+1" onclick="app.fn1()">
<script>
    var app = new Vue({
        el:'#app',
        data:{
            info:1
        },
        methods:{
            fn1:function (){
                this.info++
            }
        }
    })
</script>

（每次点击按钮，div中info的值都会发生变化，页面上的内容也会实时的改变）

插值

作用：可以将绑定的数据实时的显示出来

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

通过任何方式修改所绑定的数据，所显示的数据都会被实时替换
在插值表达式中不能写js语句，例如：var a=10，分支语句、循环语句
可以使js表达式、三目运算符、方法调用

<div id="box1">
<p>姓名：{{name}}</p>
<p>是否成年：{{age>18?'是':'否'}}</p>
<p>地址：{{address.substring(0,2)}}</p>
</div>
<script>
    var app = new Vue({
        el:'#box1',
        data:{
            name:'小明',
            age:20,
            address:'山东济南'
        }
    })
</script>