vue的基本信息及基础语法

最新推荐文章于 2022-07-01 12:00:27 发布
最新推荐文章于 2022-07-01 12:00:27 发布
阅读量354 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miaomuamua/article/details/125156048
版权

Vue 01. 快速入门的方法

1、概述

  • 了解什么是Vue框架
  • 了解为什么要使用Vue框架

2、入门应用

  • Vue框架工作原理
  • Vue实例选项

3、基础语法

  • 插值表达式

  • 指令概述、常见指令

  • v-text/v-html/v-once/v-if/v-show/v-for/v-bind/v-on/v-model

  • 拓展：关于自定义指令

3、样式处理

  • style行内样式
  • class外联样式
  • 案例：选项卡案例

1、概述

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

由前谷歌员工尤雨溪主导开发的一款前端应用开发框架！

是目前前端开发市场上，最主流的开发框架之一！

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

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

关于Vue的版本问题

2016年，开始整理前端框架，Vue的版本：0.x.x版本，市场上有部分公司已经采用该框架开发项目

  • AngularJS、ReactJS、VueJS

2017年，Angular的跨版本升级，导致学习路线非常陡峭；导致国内大部分公司开始弃用Angular

  • VueJS迅速发展并占领市场，1.x.x版本被大部分公司所认可；
  • VueJS（+）、ReactJS、AngularJS（-）

2018年之后，VueJS框架在国内大部分公司的使用场景开始逐渐成熟，开始测试并推出2.x.x

  • 接下来的几年，Vue 2.x占据国内主要开发市场；
  • 国内一些一线大厂以及大型项目，依然采用React重量级前端框架保障稳定性

至今：前端开发技术，核心主要集中

  • VueJS框架
  • React框架

VueJS版本问题：

  • 2.x：市场主流版本
  • 3.x：官方团队2022年2月开始在生态体系中主要支持，并推荐企业采用3.x架构自己的项目
（1） 什么是Vue

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

Vue是前谷歌员工尤雨溪主导研发的、一款用于前端应用快速构建的、侧重于视图渲染的 应用级框架！

关于官方说明中的一些专业术语

  • 构建用户界面：侧重于网页开发的
  • 渐进式框架：网页中需要的数据，数据的逻辑性处理以及最终网页中的合理渲染进行了良好的支持
  • 自底向上（项目规模）逐层应用：从单个网页效果开发、到大型项目应用集成，都进行了完善的支持
  • 只关注视图层：作为前端框架，从获取数据之后，专门研究如何更好的服务界面，提高用户体验
  • 易于上手：本质上使用的html/css/javascript语法， 没有更高的学习成本
  • 便于整合：可以和多项主流技术很合开发的成本很低，不需要学习新的结合性技术
  • 现代化工具链：第三方提供的各种综合技术，提供功能拓展
  • 支持类库：Vue生态链
  • 单页应用：前端应用一种新的开发模式，整合项目只有一个HTML网页
（2） 为什么要使用Vue

项目开发的本质，为的是解决生活中存在的问题；

项目是属于企业的，企业存在的本质是盈利！

提高项目开发效率，不论是技术层面，还是社会层面都是发展的一个必要的趋势！

学习技术的重点：

  • 结合社会现状，结合企业现状，学习最主流的技术；服务工作

学习一项新的技术，从技术面分析它有自己的独到之处：

学习Vue的重点：

  • Vue是现在主流的前端开发框架
  • 提供DIFF算法支持，优异的视图渲染性能，提高用户的使用体验
  • Vue提供了虚拟DOM结构，提高前端视图更新效率
  • Vue提供了完善的技术生态，极大的提高了前端应用开发效率
  • Vue同时开发多个版本，包含市场主流版本以及未来的使用趋势

2、入门应用

官方文档：https://cn.vuejs.org/v2/guide/installation.html

  • 注意事项：直接鼠标右键另存为，完成下载；Vue框架本身就是一个js文件
（1） 数据渲染案例

创建实例文件：demo01入门应用.html

  • 目标：通过代码理解Vue可以自动将变量数据渲染到网页中
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <!-- 使用特殊语法输出一个变量的数据 -->
    {{ message }}
  </div>

  <script src="./vue.js"></script>
  <script>
    // 1、创建一个vue对象，设置特定的选项
    //  el: 全称element，节点、元素、标签的意思；表示将实例对象绑定到哪个标签上
    //  data: 数据的意思；按照key:value的方式声明当前实例中使用的数据
    const app = new Vue({
      el: "#app",
      data: {
        message: 'hello vue!'
      }
    }) 
  </script>
  
</body>
</html>
（2） 数据绑定案例

创建实例文件：demo02数据绑定.html

  • 目标1：Vue框架，可以自动完成数据的绑定和渲染
  • 目标2：Vue框架底层的封装优化了大量的JS DOM操作（影响网页加载性能的最大因素），提高了网页加载和渲染数据的性能，提高了用户使用体验
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 使用特定语法，给输入框绑定一个变量 -->
    账号：<input type="text" v-model="username">
    <p>
      <!-- 使用特定语法，渲染展示变量中的数据 -->
      您输入了账号：{{ username }}
    </p>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        username: ''
      }
    })
  </script>
</body>
</html>

3、实例和选项

Vue应用本质上就是一个实例对象挂载到一个网页中的标签上！

（1） 认识实例

通过Vue创建的一个对象，对象中包含各种使用的数据和函数

<div id="app">
    {{ message  }}      <!-- 展示变量中对应的数据 -->
</div>

{{ message }}           <!-- 只能原样渲染字符串，不能读取变量数据了，超出绑定范围 -->
....
<script>
	// 创建了一个对象
    new Vue({
        el: "#app",    // 对象和标签/元素绑定
        data: {
            message: 'hello vue!' // 对象的数据，在绑定的标签内部使用
        }
        ...
    })
</script>
（2） 认识选项（了解）

一个实例对象中，通过各种选项指定/扩展了Vue应用的功能，通常这些选项会包含如下部分：

  • el

描述：实例对象挂载标签的选项，本意节点、元素、标签的意思

语法：el: "#app"

注意：el不要误写成e1 / eI，本来是element首字母

  • data

描述：实例对象中声明的初始数据，按照key:value键值对的方式声明

语法：data: { key: value, key2:value2, .... }

注意：data是数据的意思，不要误写成date（日期的意思）

  • watch

描述：实例对象中，用于声明监听器的选项；今天了解

  • computed

描述：实例对象中，用于声明计算属性的选项；今天了解

  • filters

描述：实例对象中，用于声明过滤器的选项；今天了解

  • methods

描述：实例对象中，用于声明函数的选项；今天了解

注意：一旦开始使用Vue开发项目，用到的各种功能函数不能随便写了，必须写到实例的指定选项中

  • components

描述：实例对象中，用于声明组件的选项；今天了解

  • more...

描述：Vue2.x的学习，更多的时候和实例中的选项息息相关；学习过程中需要重点关注如下几个方面

这是用来做什么的？

基本操作语法是什么样的？

使用的场景是什么？

使用有什么注意事项？

4、基础语法

新的技术会包含一些新的编码规范，Vue框架尽管使用的基础技术都是html/css/js，合理的编码规范对于项目开发效率的提升非常明显

（1） 插值表达式

插值表达式，专业术语称为mastach语法，就是通过两对花括号包含的一个表达式，可以直接执行js表达式语句，很方便的完成数据和页面的连接

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="app">
    <p>
      直接输出变量内容：{{ name }}
    </p>
    <p>
      字符串拼接：{{ '姓名:' + name }}
    </p>
    <p>
      js内建函数：{{ version.toUpperCase() }} {{ version.toLowerCase() }}
    </p>
    <p>
      js三元表达式：{{ age > 18 ? '成年': '未成年' }}
    </p>
    <p>
      自定义函数的调用：{{ reverse(version) }}
    </p>
    <!-- <p>
      if-else判断（语法结构，不能使用）：{{ if(age > 18) '成年' else  '未成年' }}
    </p> -->
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        name: "大牧",
        version: 'Version1.0',
        age: 20
      },
      methods: {
        // 自定义函数，必须写在vue实例选项的methods选项中
        reverse(str) {
          return str.split('').reverse().join('')
        }
      }
    })
  </script>

</body>
</html>

小任务：练习完成后，通读官方文档【声明式渲染 https://cn.vuejs.org/v2/guide/#声明式渲染】

面试题解析：

  • 面试官问：请简单介绍一下，Vue中什么是声明式渲染？

  • 应聘者：Vue提供了一种简介的模板语法，在声明变量的同时就已经建立了和视图的双向绑定关系；声明的变量在网页视图中可以得到同步的更新渲染！

（2） 指令概述

指令：英文单词directive，描述了一种简单的功能操作，如获取焦点；简单的DOM操作在Vue中统一的被封装成指令进行操作；

什么是指令：包含了简单的DOM操作功能的组件！

Vue中提供了自己的内建指令（掌握）、根据实际情况自定义指令（了解）

Vue中的指令都是：v-名称 固定语法格式

（3）v-text

指令名称：文本渲染指令

指令描述：输出指令对应表达式的数据，即使数据中包含了html标签，不会进行编译解释直接原样输出

<p>
    v-text指令：<span v-text="message"></span>
</p>
（4）v-html

指令名称：超文本/富文本渲染指令

指令描述：输出指令对应表达式的数据，数据中一旦包含html标签，会进行渲染解释并执行代码

注意事项：该指令在实际使用时一般解释完全安全的数据，可能会造成XSS漏洞

<p>
    v-html指令：<span v-html="message"></span>
</p>
（5）v-once

指令名称：单次加载指令

指令描述：针对网页中一些特殊的数据进行一次性加载的指令

什么样的数据，网页中只加载一次？为什么数据更新时这些特殊数据不需要更新？

网页中的logo、导航菜单、友情链接等等类似的视图结构，往往很长时间都不会发生变化！

<p>
    v-once指令：<span v-html="message" v-once></span>
</p>
（6） v-show

指令名称：条件渲染指令

指令描述：条件渲染指令，按照条件的真假通过display控制一个元素的显示/隐藏

注意事项：如果网页中一个视图结构，需要频繁的进行显示/隐藏的切换，建议通过v-show指令实现

<p>
    网站欢迎语：<span v-show="isLogin">尊敬的用户您好，欢迎访问本系统</span>
</p>
（7） v-if

指令名称：条件渲染指令

指令描述：根据给定的条件，通过DOM加载完成一个元素的显示/隐藏的切换

注意事项：页面中某些元素很长时间才会出现显示和隐藏的切换，建议使用v-if指令操作

<p>
    v-if网站欢迎语：<span v-if="isLogin">尊敬的用户您好，欢迎访问本系统</span>
    <span v-else>登录 | 注册</span>
    <br />
    年龄： <span v-if="age <= 20">弱冠之年</span>
    <span v-else-if="age > 20 && age <= 30">而立之年</span>
    <span v-else-if="age > 30 && age <= 40">不惑</span>
    <span v-else-if="age > 40 && age <= 50">知命</span>
    <span v-else>百度一下...</span>
</p>

面试题解析：

  • 面试官问：请简单描述一下你对v-show指令和v-if指令的认识？
  • 应聘者：v-show指令和v-if指令都是Vue框架中用于条件渲染的指令，不同的是v-show指令通过样式display控制包含元素的显示或者隐藏切换，v-if指令通过DOM加载控制包含元素的显示或者隐藏；项目中我们一般通过v-show指令控制需要频繁显示/隐藏切换的元素，v-if指令控制一些状态保持时间较长的元素的显示隐藏切换的！
（8） v-bind

指令名称：属性绑定指令

指令描述：可以通过该指令，将一个变量的值动态的绑定到标签元素的属性上

<p>
    <!-- 正常，图片直接通过路径访问：<img src="1.webp"/> -->
</p>
<p>
    <!-- v-bind指令，用于给标签的属性动态绑定变量，实现了动态控制标签属性的功能 -->
    <img v-bind:src="img"/>
</p>
<p>
    <!-- v-bind指令控制属性的操作，项目中非常常见的功能，提供了简写语法-->
    <img :src="img2"/>
</p>
（9）v-on

指令名称：事件绑定指令

指令描述：Vue可以通过指令，给指定元素/标签，添加事件处理机制

<p>
    <!-- v-on:事件名称="事件函数名称" -->
    <!-- v-on绑定事件指令 -->
    <!-- 事件名称：原生JS提供的事件类型 -->
    <button v-on:click="showMsg">点击我试试</button>
    <!-- vue针对事件绑定操作，提供了简写语法 -->
    <button @click="showArticle">再点击我试试</button>
</p>
（10） v-for

指令名称：列表渲染指令

指令描述：将列表数据进行循环渲染的指令

基本语法：

<p>
    渲染输出数据：v-for指令
    <!-- 基本渲染语法 ：v-for指令的值：就是一个循环语句 -->
<ul>
    <li v-for="item in techs">{{ item }}</li>
</ul>

<!-- v-for指令使用时，可以添加一个遍历索引：(item, index) in techs -->
<ul>
    <li v-for="(item, index) in techs">{{index}} - {{item}}</li>
</ul>

<!-- v-for指令渲染动态变化的数据时，需要动态绑定一个key属性，完成状态保持 -->
<ul>
    <li v-for="(item, index) in techs" :key="item">
        {{index}} - {{item}}
    </li>
</ul>

</p>

状态绑定：通过key属性完成对应数据的状态保持

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    当前用户：<input type="text" @keyup="addUser"/>
    <ul>
      <li v-for="item in accounts" :key="item.id"> 
        <input type="checkbox"/>
        {{ item.id }} : {{ item.name }}</li>
    </ul>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        accounts: [
          {id: 3, name: "tom"},
          {id: 2, name: "jerry"},
          {id: 1, name: "shuke"} 
        ]
      },
      methods: {
        addUser(e) {

          if(e.keyCode === 13){
            console.log("用户按下了回车键")
            let name = e.target.value
            let id = this.accounts.length > 0 ? this.accounts[0].id + 1: 1
            // 数组的开头，添加一个数据
            this.accounts.unshift({id, name})
            e.target.value = ''
          }
        }
      }
    })
  </script>
</body>
</html>

关于key属性，绑定数据状态时，值的问题：

<ul>
    <!--
:key属性，执行数据的状态绑定时
值：必须是当前列表渲染数据的一部分；索引和当前数据无关，只是一个计数器
值：必须是唯一的
-->
    <li v-for="item in accounts" :key="item.id"> 
        <!-- <li v-for="(item, index) in accounts" :key="index">  -->
        <input type="checkbox"/>
        {{ item.id }} : {{ item.name }}</li>
</ul>

v-for指令和页面加载性能的问题：面试题【了解】

面试题解析：

  • 面试官问：v-for指令，列表渲染同时在页面上循环渲染多个数据；那么如果只是更新了一条数据或者新增/删除了一条数据，v-for指令渲染的这些数据会不会全部重新刷新一次？

  • 应聘者：v-for指令在执行过程中，如果渲染的列表数据中发生了更新/新增/删除操作，执行差异化更新，只针对发生更新的数据进行渲染；没有更新的数据不执行重新加载，优化了加载性能！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k3fSfaQg-1654526860429)(assets/image-20220606163523184.png)]

（11）v-model

指令名称：表单数据绑定指令

指令描述：作用在表单元素上的，用于数据双向绑定的执行；是VUE特点之一

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    账号：<input type="text" v-model="username"><br />
    密码：<input type="password" v-model="userpass"></br />
    <button @click="submit">提交</button>
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        username: '',
        userpass: ''
      },
      methods: {
        submit() {
          // v-model指令绑定数据之后，可以直接操作表单数据；省略原生js获取数据的步骤
          console.log("提交表单数据：", this.username, this.userpass)
        }
      }
    })
  </script>
</body>
</html>

5、选项卡案例

VUE中实现各种效果，尽量通过数据的控制完成效果的实现；实际开发过程中尽可能避免DOM操作

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin: 0; padding: 0; box-sizing: border-box;}
    #container{width: 600px;height: 400px;box-shadow: #000 0 0 2px;margin: 20px auto; border-radius: 8px; overflow:hidden;}
    ul{list-style:none; height: 50px; display: flex; border-bottom:solid 2px #ddd;}
    ul li{flex: 1;text-align: center; line-height: 50px; cursor: pointer;}
    ul li.active{background: orangered; color:white;}
    #content{position:relative;}
    #content div{display: none; position: absolute;left: 0;top: 0; text-align: center;line-height: 100px; font-size: 22px;}
    #content div.active{display: block;}
  </style>
</head>

<body>
  <div id="container">
    <ul>
      <li :class="activeIndex===0?'active':''" 
          @click="activeIndex=0">新闻</li>
      <li :class="activeIndex===1?'active':''" 
          @click="activeIndex=1">通知</li>
      <li :class="activeIndex===2?'active':''" 
          @click="activeIndex=2">公告</li>
    </ul>
    <div id="content">
      <div :class="activeIndex===0?'active':''" >新闻内容</div>
      <div :class="activeIndex===1?'active':''" >通知内容</div>
      <div :class="activeIndex===2?'active':''" >公告内容</div>
    </div>
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#container",
      data: {
        activeIndex: 0   // 当前激活的标题/内容的索引
      }
    })
  </script>
</body>

</html>

6、留言板案例

参考下面的页面结构，通过Vue实现一个留言板案例开发

开发注意事项：尽量不要操作DOM，重点在于数据的结构

<Script>
	const app = new Vue({
		el: "#app",
		data: {
			// 留言板数据
			messageBoards: [
				{id: 2, name: '白居易', publish: '2022-06-06 17:10',
						img: './images/default.jpg',
						content: '浔阳江头夜送客....'},
				{id: 1, ...},
			]
		}
	})
</script>
image-20220606171620956
miaomuamua
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue的基本语法和使用
但行好事，莫问前程
10-11 2540
第一章 vue.js简介 第二章 Vue.js基本概念 第三章 Vue模板语法 第四章 Class的绑定 第五章 列表渲染 第六章 事件处理 第七章 表单绑定 第八章 过滤器 第九章 实例生命周期
前端面试准备-------Vue
fj1247565817的博客
08-30 1105
本文是根据知乎 爱前端不爱恋爱提供的目录整理供大家学习，后将持续更新 1、vue解决了什么问题 2、MVVM的理解 3、如何实现一个自定义组件，不同组件之间如何通信的？ 4、nextTick 5、生命周期 6、虚拟dom的原理 7、双向绑定的原理？数据劫持？ 8、组件通信 父->子 子->父 非父子组件 9、Proxy 相比于 defineProperty 的优势 10、watch c...
Vue自学笔记(2)——Vue的基础语法和基本使用
xiecheng1995的博客
07-07 294
上一讲主要介绍了Vue的环境、项目等的配置，今天来回顾一下Vue的一些基础语法。 Vue项目的目录结构 首先看一下昨天新建的Vue项目的目录结构： node_modules文件夹昨天说过了，是存放项目相关依赖的文件夹，与package.json相互对应。public文件夹存放项目首页index.html等文件，暂时先不用管。src中主要放置项目的静态资源文件，其中assets存放图片、css等文...
Vue基础知识总结 2：vue 动态绑定
热门推荐
学Java，找哪吒
07-15 1万+
大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
vue基础语法练习源码
12-09
首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的核心，它通过`new Vue()`创建。在HTML文件中，我们通常使用`<script>`标签引入Vue库，并创建实例，将DOM元素与Vue实例绑定。例如： ```html ...
Vue3 安装下载，基础语法
06-15
让我们深入了解一下Vue3的安装下载以及基础语法。 **一、Vue3的安装与下载** 1. **全局安装：** 可以通过Node Package Manager (npm) 来全局安装Vue3 CLI（命令行工具）。首先确保已经安装了Node.js和npm，然后在...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
vue.js入门教程之基础语法小结
10-21
在这个“vue.js入门教程之基础语法小结”中，我们将深入探讨Vue.js的基本语法，帮助初学者快速掌握其核心概念。 1. 插入文本 在Vue中，我们可以使用双大括号`{{ }}`来插入文本。例如，`<span>Message: {{ text }}...
vue入门基础语法基本使用以及组件配置安装教程.zip
最新发布
05-15
以下是一个关于 Vue.js 入门基础语法、基本使用以及组件配置和安装的简要教程 1. Vue.js 基础语法和基本使用 数据绑定 指令 事件处理 2. 组件配置和安装 全局组件注册 局部组件注册 使用 Vue CLI 搭建项目并安装组件...
vue案例练习
08-10
vue案例练习
Vue第一章习题【答案】
qq_46556714的博客
09-30 1万+
Vue第一章习题 一、 填空题 Vue是一套构建__用户界面____的渐进式框架。 MVVM主要包含3个部分，分别是Model、View和_ViewModel_____. Vue中通过__refs________属性获取相应DOM元素。 在进行Vue调试时，通常使用_vue-devtools_____工具来完成项目的开发。 Vue中页面结构以__组件_____形式存在。 二、 判断题 Vue与Angual 和React框架不同的是，Vue设计为自下而上逐层应用。✔ Vue完全能够为复杂的单页应用提供驱
【Vue.js】004-Vue.js模板语法
訾博（ZiBo）的博客
08-12 263
一、插值 1、文本 说明： ①数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值； ②Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新； ③通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定； 代码示例： <!DOCTYPE html> <html&
vue 数组右键菜单获取当前节点数据
weixin_39246975的博客
06-07 1028
vue 右键菜单
关于VUE
cx_129的博客
08-19 157
VUE 是一种用于构建用户界面的渐进式框架。可以自底向上逐层应用
vue 为什么要销毁第三方实例_Web前端工程师面试之Vue问题汇总解析
weixin_39827775的博客
11-20 216
又是一年毕业季，很多学习前端的同学面对激烈的求职竞争倍感压力，想要了解企业招聘会提问哪些问题。今天千锋郑州Web前端培训小编就给大家分享一下高级Web前端工程师面试中有关Vue的问题及解析。 1、Vue是什么?Vue.js是一个构建数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合，当与单文...
vue训练营6 --- vue设计理念
m0_38066007的博客
08-03 222
在vue的官网上写着大大的定义和特点：渐进式JavaScript框架 易用、灵活和高效 所以阐述此题的整体思路按照这个展开即可。 渐进式JavaScript框架： 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易 于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使 用时，Vue 也完全能够为复杂的单页应用提供驱动。 易用性vue提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要
Vue介绍
A
11-29 3508
一、Vue介绍 1. Vue是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 2.Vue有哪些特点？ Vue.js 是一个优秀的前端界面开发 JavaScript 库，它之所以非常火，是因为有众多突出的特点，其中主要的特点有以下几个。 门槛低、上手快: 简单易学，只要稍微会点
Vue2.0——（一）
qq_46547179的博客
03-05 408
Vue的介绍 Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（源自Vue.js官方文档） 1. 数据驱动视图 好处：当页面数据发生变化时，页面会自动重新渲染，需要注意的是数据驱动视图是单向绑定的，即当数据发生变化的时候，视图才会更新。 2.双向数据绑定(v-model) 优
Vue环境配置与基础语法概览
"这篇文档是关于Vue学习的总结，涵盖了环境搭建、基本语法以及插件安装等内容。作者详细列举了开发环境中所需的软件版本，如Node.js、Git、VSCode及其相关插件，如Vetur、LiveServer等。此外，还介绍了如何安装cnpm...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值