vue入门教程（一）「建议收藏」

全栈程序员-站长 • 2022年6月4日上午10:00 • 未分类 • 阅读 34

vue入门教程（一）「建议收藏」1.vue简介1.1vue是什么官网：https://cn.vuejs.org/Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。1.2vue的特点1)遵循MVVM模式2)编码简洁,体积小,运行效率高,适合移动/PC端开发.

大家好，又见面了，我是你们的朋友全栈君。

1. vue简介

1.1 vue是什么

官网：https://cn.vuejs.org/

vue入门教程（一）「建议收藏」

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

1.2 vue的特点

1) 遵循 MVVM 模式

2) 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3) 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

1.3 与其它前端js框架的关联

1) 借鉴 angular 的模板和数据绑定技术

2) 借鉴 react 的组件化和虚拟 DOM 技术

1.4 vue拓展插件

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

2. 基本使用

2.1 hello world

<body>

<!--
  1. 引入Vue.js
  2. 创建Vue对象
    el : 指定根element(选择器)
    data : 初始化数据(页面可以访问)
  3. 双向数据绑定 : v-model
  4. 显示数据 : {
  
  {xxx}}
-->

<!--模板-->
<div id="test">
  <input type="text" v-model="msg"><br><!--指令-->
  <input type="text" v-model="msg"><!--指令-->
  <p>hello {
  
  {msg}}</p><!--大括号表达式-->
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({ // 配置对象 options
    // 配置选项(option)
    el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
    data: {
      msg: 'world'
    }
  })
</script>
</body>

2.2 调试工具

在Chrome或Firefox浏览器的扩展插件仓库里搜vue devtool，安装Vue.js devtools.

打开vue项目,在控制台选择vue，操作组件查看信息变化。

vue入门教程（一）「建议收藏」

2.3 vue的MVVM

vue入门教程（一）「建议收藏」

MVVM分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器） 1、 M：模型层，主要负责业务数据相关； 2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层； 3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；

MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦。

3. 模块语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

双大括号表达式

语法: {
{exp}}

功能: 向页面输出数据，可以调用对象的方法

指令一：强制数据绑定

功能: 指定变化的属性值

完整写法: v-bind:xxx=’yyy’ //yyy 会作为表达式解析执行

简洁写法: :xxx=’yyy’

指令二：绑定事件监听

1) 功能: 绑定指定事件名的回调函数

完整写法	整洁写法
v-on:keyup=’xxx’	@keyup=’xxx’
v-on:keyup.enter=’xxx’	@keyup.enter=’xxx’

案例演示

<div id="app">
  <h2>1. 双大括号表达式</h2>
  <p>{
  
  {content}}</p>
  <p>{
  
  {content.toUpperCase()}}</p>

  <h2>2. 指令一: 强制数据绑定</h2>
  <a v-bind:href="url">访问指定站点1</a><br>
  <a :href="url">访问指定站点2</a><br>

  <h2>3. 指令二: 绑定事件监听</h2>
  <button v-on:click="test">点我</button>
  <button @click="test2('詹姆斯')">点我</button>
  <!--<button @click="test2(content)">点我</button>-->
</div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      content: 'NBA I Love This Game',
      url: 'http://www.baidu.com'
    },
    methods: {
      test () {
        alert('湖人总冠军!')
      },
      test2 (content) {
        alert('你好,'+content);
      }
    }
  })
</script>

效果如下：

vue入门教程（一）「建议收藏」

点击链接都能跳转，点击按钮都能触发alert事件。

4.计算属性和监听属性

4.1 计算属性computed

在vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读。所以在遇到复杂的逻辑时应该使用计算属性。

computed计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量改变时，计算属性也会跟着改变；
computed根据一个现有数据去生成一个新数据，并且这两个数据会永久的建立关系，还会建立缓存，当无关数据改变的时候，不会重新计算而是直接使用缓存中的值；
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

<div id="app">
  <p>原始字符串: {
  
  { message }}</p>
  <p>计算后反转字符串: {
  
  { reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

4.2 监听属性watch

1) 通过 vm 对象的$watch()或 watch 配置来监视指定的属性

2) 当属性变化时, 回调函数自动调用, 在函数内部进行计算

<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    姓名(单向): <input type="text" placeholder="Full Name" v-model="fullName"><br>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'A',
            lastName: 'B',
            fullName: 'A-B'
        },

        watch: {
            // 配置监视firstName
            firstName: function (value) { // 相当于属性的set
                console.log('watch firstName', value);
                // 更新fullName2  this相当于vm对象
                this.fullName = value + '-' + this.lastName
            }
        }
    });

    // 监视lastName
    vm.$watch('lastName', function (value) {
        console.log('$watch lastName', value);
        // 更新fullName2
        this.fullName = this.firstName + '-' + value
    })

</script>

我们有这样一个功能，我们可以输入姓和名，然后另一个输入框要实时拼接姓和名。我们可以用watch机制来实现。

我们监视姓和名两个变量，每次有改变，则自动触发watch对应的方法，执行逻辑。

vue入门教程（一）「建议收藏」

4.3 computed setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  姓名(双向): <input type="text" placeholder="Full Name3" v-model="fullName"><br>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'A',
            lastName: 'B'
        },

        // 计算属性配置: 值为对象
        computed: {
            fullName: {
                // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
                get() {
                    console.log('fullName3 get()')
                    return this.firstName + '-' + this.lastName
                },
                // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
                set(value) {
                    console.log('fullName3 set()', value)
                    // 更新firstName和lastName
                    const names = value.split('-')
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        }
    })
</script>

效果如下：

vue入门教程（一）「建议收藏」

5.样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

5.1 class

class属性绑定有三种情况：

  <p :class="myClass">xxx是字符串</p>
  <p :class="{classA: hasClassA, classB: hasClassB}">xxx是对象</p>
  <p :class="['classA', 'classB']">xxx是数组</p>

   <!--点击更新按钮 第二个p标签会实现classA和classB样式的来回切换 -->
  <button @click="update">更新</button>

<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      myClass: 'classA',
      hasClassA: true,
      hasClassB: false,
      activeColor: 'red',
      fontSize: '20px'
    },

    methods: {
      update () {
        this.hasClassA = !this.hasClassA;
        this.hasClassB = !this.hasClassB;
      }
    }
  })
</script>

5.2 内联样式

我们可以在 v-bind:style 直接设置样式：

<div id="app">
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">湖人总冠军</div>
</div>

<script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        activeColor: 'green',
        fontSize: 30
      }
    })
<script type="text/javascript">

以上实例div为：

<div style="color: green; font-size: 30px;">湖人总冠军</div>

也可以直接绑定到一个样式对象，让模板更清晰：

<div id="app">
  <div v-bind:style="styleObject">湖人总冠军</div>
</div>

<script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        styleObject: {
          color: 'green',
          fontSize: '30px'
        }
      }
    })
<script type="text/javascript">

v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">湖人总冠军</div>
</div>

<script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        baseStyles: {
          color: 'green',
          fontSize: '30px'
        },
        overridingStyles: {
          'font-weight': 'bold'
        }
      }
    })
<script type="text/javascript">

6. v-if和v-show

相同点：v-if与v-show都可以动态控制dom元素显示隐藏

不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。

如果需要频繁切换使用 v-show 较好

<div id="demo">
  <p v-if="ok">表白成功</p>
  <p v-else>表白失败</p>

  <hr>
  <p v-show="ok">求婚成功</p>
  <p v-show="!ok">求婚失败</p>

  <button @click="ok=!ok">切换</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      ok: true,
    }
  })
</script>

页面渲染如下：

vue入门教程（一）「建议收藏」

我们也可以用v-else-if进行链式调用

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

7. 列表渲染

7.1 列表展示

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {
  
  { item.message }}
  </li>
</ul>

<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>

在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。

  <ul>
    <li v-for="(p, index) in persons" :key="index">
      {
  
  {index}}--{
  
  {p.name}}--{
  
  {p.age}}
    </li>
  </ul>

<script>
  new Vue({
    el: '#demo',
    data: {
      persons: [
        {name: 'Tom', age:18},
        {name: 'Jack', age:17},
        {name: 'Bob', age:19},
        {name: 'Mary', age:16}
      ]
    }
</script>

你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

7.2 列表更新和删除

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

下面基于上面的代码演示一下：

    <button @click="deleteP(index)">删除</button>
    <button @click="updateP(index, {name:'Cat', age: 16})">更新</button>

    methods: {
      deleteP (index) {
        this.persons.splice(index, 1) 
              // 调用的不是原生数组的splice(), 而是一个变异(重写)方法
              // 1. 调用原生的数组的对应方法
              // 2. 更新界面
      },

      updateP (index, newP) {
        console.log('updateP', index, newP)
        this.persons.splice(index, 1, newP)
      },

      addP (newP) {
        this.persons.push(newP)
      }
    }

7.3 显示过滤/排序后的结果

有时，我们想要显示一个数组经过过滤排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

我们实现一个案例：展示姓名和年龄的数组列表。同时可以按照姓名筛选和年龄排序。

<div id="demo">
  姓名：<input type="text" v-model="searchName">
  <ul>
    <li v-for="(p, index) in filterPersons" :key="index">
      {
  
  {index}}--{
  
  {p.name}}--{
  
  {p.age}}
    </li>
  </ul>
  <div>
    <button @click="setOrderType(2)">年龄升序</button>
    <button @click="setOrderType(1)">年龄降序</button>
    <button @click="setOrderType(0)">原本顺序</button>
  </div>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      searchName: '',
      orderType: 0, // 0代表不排序, 1代表降序, 2代表升序
      persons: [
        {name: 'Tom', age:18},
        {name: 'Jack', age:17},
        {name: 'Bob', age:19},
        {name: 'Mary', age:16},
        {name: 'Tim', age:16},
      ]
    },

    computed: {
      filterPersons () {
        // 取出相关数据
        const {searchName, persons, orderType} = this;
        let arr = [...persons];
        // 过滤数组
        if(searchName.trim()) {
          arr = persons.filter(p => p.name.indexOf(searchName)!==-1)
        }
        // 排序
        if(orderType) {
          arr.sort(function (p1, p2) {
            if(orderType===1) { // 降序
              return p2.age-p1.age
            } else { // 升序
              return p1.age-p2.age
            }

          })
        }
        return arr
      }
    },

    methods: {
      setOrderType (orderType) {
        this.orderType = orderType
      }
    }
  })
</script>

效果图如下：

vue入门教程（一）「建议收藏」

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/136043.html原文链接：https://javaforall.net

0 0

关于作者

全栈程序员-站长

133.5K 文章

3 粉丝

本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”

模糊PID基本原理及matlab仿真实现（新手！新手！新手！）「建议收藏」

上一篇 2022年6月4日上午9:46

cBridge 2.0 测试网上线！

下一篇 2022年6月4日上午10:00

Ai程序员

智能体工具构建与集成实战：以HuggingFace Agents-Course项目为例

智能体工具构建与集成实战：以HuggingFace Agents-Course项目为例

Ai探索者
2026年3月15日
2
k3s方案

k3s方案什么是 k3sk3s 是一个轻量级的 Kubernetes 发行版它针对边缘计算物联网等场景进行了高度优化专为无人值守资源受限远程位置或物联网设备内部的生产工作负载而设计 k3s 有以下增强功能打包为单个二进制文件使用基于 sqlite3 的轻量级存储后端作为默认存储机制同时支持使用 etcd3 MySQL 和 PostgreSQL 作为存储机制封装在简单的启动程序中通过该启动程序处理很多复杂的 TLS 和选项默认情况下是安全的对轻量级环境有合理的默认值

全栈程序员-站长
2026年3月16日
2
Style display 属性

Style display 属性定义和用法 display 属性设置或返回元素的显示类型 HTML 中的元素大多是内联或块元素一个内联元素在其左侧和右侧都是浮动内容一个块元素填满整个行并没有什么可显示在其左侧或右侧 display 属性还允许作者显示或隐藏一个元素与 visibility 属性类似然而如果您设置 display none 将隐藏整个元素如果您设置 visibility hidden 元素的

全栈程序员-站长
2026年3月16日
3
单片机和4G模块通信总结（EC20）

单片机和4G模块通信总结（EC20）第一代数据汇集单元基本开发完毕运行也有一年了做下总结吧希望能够给大家提供帮助 4G 模块选择的是移远的 EC20 通过串口和单片机交互其实是什么型号并不重要大体的流程和注意事项基本都一样一硬件首先 4G 模块本身功耗很高尤其是 4G 模块刚上电开机瞬间会有一个大的电流脉冲这里我们选择的芯片本身参数符合指标但是实际使用时候发现有一些模块损坏问题现场反馈是后台没有数据查问题发现是 MCU 不断在重启在查发现是 4G 模块重启导致 MCU 复位再分析是 4G 电源貌似处于一种震荡状

全栈程序员-站长
2026年3月20日
3
vue 项目结构

vue 项目结构作为一个新手当我们拿到一个新的项目的时候常常不太清楚它的项目结构就很头痛今天我给大家梳理一下 vue 的项目结构 node modules 文件项目依赖文件夹 public 文件夹一般放置一些静态的资源图片需要注意的是放在 public 文件中的静态资源 webpack 进行打包的时候会原封不动的打包到 dist 文件夹中 src 文件夹程序员自己代码放置的地方 assets 文件夹一般也是放置一些静态的资源一般放置多个组件的静态资源需要注意的是放置在 assets 文件夹里面的资源在 webpac

全栈程序员-站长
2026年3月17日
2
Linux安装Anaconda3过程详解

Linux安装Anaconda3过程详解担心自己也忘记所以顺便记录一下当然也方便大家也学会 Linux 安装 Anaconda 环境说明 Linux 腾讯云下的 CentOS7 6Anaconda 版本 Anaconda3 5 2 01 下载 1 1 去清华镜像站下载上传到云端服务器上清华镜像站 https mirrors tuna tsinghua edu cn anaconda archive 下载的版本见下下载 64 位的 Linux 版本上传到 Linux 上我选择的路径为 usr local Anaconda 1

全栈程序员-站长
2026年3月16日
2

vue入门教程（一）「建议收藏」

1. vue简介

1.1 vue是什么

1.2 vue的特点

1.3 与其它前端js框架的关联

1.4 vue拓展插件

2. 基本使用

2.1 hello world

2.2 调试工具

2.3 vue的MVVM

3. 模块语法

4.计算属性和监听属性

4.1 计算属性computed

4.2 监听属性watch

4.3 computed setter

5.样式绑定

5.1 class

5.2 内联样式

6. v-if和v-show

7. 列表渲染

7.1 列表展示

7.2 列表更新和删除

7.3 显示过滤/排序后的结果

关于作者

全栈程序员-站长

相关推荐

智能体工具构建与集成实战：以HuggingFace Agents-Course项目为例

k3s方案

Style display 属性

单片机和4G模块通信总结（EC20）

vue 项目结构

Linux安装Anaconda3过程详解

发表回复