教育平台项目前端：Vue.js 入门

最新推荐文章于 2023-01-02 13:49:19 发布

RendaZhang

最新推荐文章于 2023-01-02 13:49:19 发布

阅读量681

点赞数

分类专栏：软件开发文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_40286307/article/details/108332876

版权

Introduction to Vue.js

What is Vue.js

Vue.js 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用。

Vue.js 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与
现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发（即插即用）。

官方网站: https://cn.vuejs.org/v2/guide/

Why Use Vue.js?

声明式渲染：前后端分离是未来趋势。
渐进式框架：适用于各种业务需求。
简单易学：中文文档，易于理解和学习。

Basic Knowledge

使用 Vue.js

在 html 页面使用 script 引入 vue.js 的库即可使用：

远程CDN：<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
本地：<script src="js/vue.min.js"></script>

Vue-CLI 脚手架：使用 vue.js 官方提供的 CLI 脚本架可以方便地去创建 vue.js 工程雏形。

入门程序

创建一个 vue_test 目录，并且在目录下创建 01_vue入门程序.html 文件。

定义 html，引入 vue.js
定义 app div，此区域作为 vue.js 的接管区域
定义 Vue.js 实例，接管 app 区域。
定义 model（数据对象）
在 app 中展示数据

<!DOCTYPE html>
<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" />
    <title>Document</title>
    <!-- 引入 vue.js -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
    <script src="js/vue.min.js"></script>
  </head>
  <body>
    <!-- 创建 id 为 app 的 div -->
    <div id="app">{
  {name}}</div>
  </body>

  <script>
    // 创建 vue 实例
    var VM = new Vue({
    
      el: "#app",
      data: {
    
        name: "Hello Vue",
      },
    });
  </script>
</html>

{ {}} 插值表达式：通常用来获取 Vue.js 实例中定义的数据（data）；属性节点中不能够使用插值表达式。

el 挂载点：定义 Vue.js 实例挂载的元素节点，表示 vue.js 接管该区域。

Vue 的作用范围：Vue 会管理 el 选项中的元素及其内部元素。

选择挂载点时，可以使用其他选择器，但是建议使用 ID 选择器。

挂载点可以设置其他的 DOM 元素进行关联，但是建议选择 DIV，不能使用 HTML 和 Body 标签。

data 数据对象：Vue 中用到的数据定义在 data 中；data 中可以写复杂类型；渲染复杂类型数据的时候遵守 js 语法。

<body>
    <!-- 创建 id 为 app 的 div -->
    <div id="app">
        {
  {name}} <br>
        {
  {school.name}} {
  {school.number}} <br>
        <ul>
            <li>{
  {names[0]}}</li>
            <li>{
  {names[1]}}</li>
            <li>{
  {names[2]}}</li>
        </ul>
    </div>
</body>

<script>
    // 创建 vue 实例
    var VM = new Vue({
    
        el: "#app",
        data: {
    
            name: "Hello Vue",
            // 对象类型
            school: {
    
                name: "学校名称",
                number: "100000"
            },
            // 数组类型
            names: ["张人大", "刘小明", "赵小红"]
        },
    });
</script>

声明式渲染的好处

Vue 中的声明式渲染，简单理解就是 Vue 将声明的数据渲染到 HTML。

<body>
    <div id="app">
        <h2>{
  {name}}</h2>
    </div>
</body>

<!-- <script src="js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
$("#app").append("<h2>Hello World</h2>")
});
</script> -->

<script src="js/vue.min.js"></script>
<script>
    var VM = new new Vue({
    
        el: "#app",
        data: {
    
            name: "Hello World!!",
        },
    });
</script>

Vue 常用指令

Vue 指令是带有 v- 前缀的特殊属性；通过指令来操作 DOM 元素。

v-text 指令

作用：获取 data 数据，设置标签的内容。
注意：默认写法会替换全部内容，使用插值表达式 { {}} 可以替换指定内容。

<body>
    
    <div id="app">
        <h2>{
  {message}}高级</h2>

        <!-- v-text 获取 data 数据，设置标签的内容，会覆盖标签里的内容体-->
        <h2 v-text="message">高级</h2>

        <!-- 拼接字符串 -->
        <h2 v-text="message+1"></h2>
        <h2 v-text="message+'abc'"></h2>
    </div>

</body>
<script src="js/vue.min.js"></script>
<script>
    var VM = new new Vue({
    
       el: "#app",
       data: {
    
           message: "Java程序员"
       } 
    });
</script>

v-html 指令

作用: 设置元素的 innerHTML (可以向元素中写入新的标签)

<body>
    <div id="app">
        <!-- 获取普通文本 -->
        <h2>{
  {message}}</h2>
        <h2 v-text="message"></h2>
        <h2 v-html="message"></h2>

        <!-- 设置元素的 innerHTML -->
        <h2 v-html="url"></h2>
        <h2 v-text="url"></h2>
    </div>
</body>

<script src="js/vue.min.js"></script>
<script>
    var VM = new new Vue({
    
       el: "#app",
       data: {
    
           message: "Java程序员",
           url: "<a href='https://www.baidu.com'>百度一下</a>"
       } 
    });
</script>

v-on 指令

作用：为元素绑定事件, 比如: v-on:click 可以简写为 @click="方法"

绑定的方法定义在 VUE 实例的 method 属性中

<body>
    <div id="app">
        <!-- 使用 v-on 绑定 click 点击事件 -->
        <input type="button" value="Button" v-on:click="methodName">
        <!-- 使用 @ 符号也可以绑定-->
        <input type="button" value="Button" @click="methodName">
         <!-- 双击事件 -->
        <input type="button" value="双击击按钮" @dblclick="show">
        <!-- 绑定点击事件 -->
        <h2 @click="changeName">{
  {food}}</h2>
    </div>
</body>

<script src="js/vue.min.js"></script>
<script>
    var VM = new new Vue({
    
       el: "#app",
       data: {
    
           food: "Turkey"
       },
       // 通过 methods，专门存放 Vue 中的方法
       methods: {
    
           methodName: function() {
    
               alert("提醒！");
           },
           show: function() {
    
               alert("Double Click");
           },
           changeName: function() {
    
               console.log(this.food);
               // 在 VUE 中不需要考虑如何更改 DOM 元素, 
               // 重点放在数据更新之后，使用数据的那个元素会同步更新
               this.food+=" Delicious!";
           }
       }
    });
</script>

v-on 指令补充

传递自定义参数：函数调用传参

事件修饰符：对事件触发的方式进行限制

<body>
    <div id="app">
        <!-- 函数传参 -->
        <input
          type="button"
          value="礼物刷起来"
          @click="showTime(111, 'test111')"
        />
  
        <!-- 事件修饰符指定哪些方式可以触发事件 -->
        <input type="text" @keyup.enter="hiFunction" />
      </div>
</body>
<script src="js/vue.min.js"></script>
<script>
  var VM = new Vue({
    
    el: "#app",
    data: {
    },
    methods: {
    
      showTime: function (p1, p2) {
    
        console.log(p1);
        console.log(p2);
      },
      hiFunction: function () {
    
        alert("How are you");
      },
    },
  });
</script>

事件绑定方法，可以传入自定义参数
定义方法时，需要定义形参来接收实际的参数
事件的后面跟上 .修饰符 可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有许多，使用时可以查询文档

计数器案例

data 中定义数据：比如 num 值为 1
methods 中添加两个方法：比如 add（递增），sub（递减）
使用 { {}} 将 num 设置给 span 标签
使用 v-on 将 add、sub 分别绑定给加、减按钮
累加到 10 停止
递减到 0 停止

<body>
    <body>
        <div id="app">
            <!-- 计算功能区域 -->
            <div>
                <input type="button" value="+" v-on:click=

最低0.47元/天解锁文章

RendaZhang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
教育平台项目前端：Vue.js 入门

Introduction to Vue.jsWhat is Vue.jsVue.js 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用。Vue.js 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发（即插即用）。官方网站: https://cn.vuejs.o
复制链接

扫一扫