摘要：在生成的项目中，我们打开文件夹下组件，为便于演示，删减了一部分内容本文中的例子都将改造组件来演示语法一创建组件在中，有好几种方式用来创建组件，后面会多带带写一篇文章来介绍。表达式插值中也支持表达式插值用双大括号将表达式括起来。
Vue 的官方文档写的非常棒(另一个我觉得中文文档写的很好地是 Ant-Design)。
这篇文章以使用 vue-cli 生成的项目为基础，以完整 demo 的形式讲解 Vue 的基础语法。关于 vue-cli 生成项目的讲解，可以参考：vue-cli 构建 vue 项目详解 。
在 vue-cli 生成的项目中，我们打开 src/components 文件夹下 HelloWorld.vue 组件，为便于演示，删减了一部分内容（本文中的例子都将改造 HelloWorld.vue 组件来演示 Vue 语法）：
一、创建组件{{ msg }}
Essential Links
在 vue 中，有好几种方式用来创建组件，后面会多带带写一篇文章来介绍。
HelloWord.vue 文件中的内容分为三个部分：
...
分别在这三类标签里面写入结构、脚本、样式。 这个文件以 .vue 结尾（注意：其他创建组件方式是以 .js 结尾），这是 vue 中创建组件的一种方式：单文件组件。换句话说就是每个 .vue 文件就是一个组件。
有一点需要注意：template 只能允许一个子元素。
二、导入组件现在的文件中，是在路由 router/index.js 中引入的 HelloWorld 组件：
import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "@/components/HelloWorld";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/",
name: "HelloWorld",
component: HelloWorld,
},
],
});
引入的方式一目了然，不再赘述。那如何在组件中引入组件呢？下面我们在 App 组件中直接引入 Helloworld 看看：
在 script 标签中，HelloWorld 组件被引入并添加到 components 属性中。这样，就在 App 组件中引入了 HelloWorld 组件。启动项目在浏览器中打开，会看到 App 组件中的内容：Vue 的 Logo 、 HelloWorld 组件里的内容。
那如果要引入多个组件该怎么写呢？假设我们再有个 Demo 组件：
在 components 对象中定义多个属性，指向引入的组件即可。
三、插值和指令 1、插值(Interpolation)Vue 插值最常见的形式就是使用双大括号 {% raw %}{{ }} {% endraw %} 的文本插值。在文章开头中的 HelloWorld 组件中就使用了插值的方式实现数据绑定。这里我们详细介绍一下：
在 Vue 组件中，都有一个 data 属性，data 必须是一个函数，该函数的返回值是一个对象。我们可以在 template 中通过双大括号来读取 data 中的属性值：
{{ msg }}
这个将不会改变: {{ msg }}
这里也通过使用 v-once 指令（下面我们要说），执行一次性地插值：当数据改变时，插值处的内容不会更新。但是要注意一次性插值会影响到该节点上的其它数据绑定。
如何在 template 中包裹的标签的属性上插值呢？假设我们有一个 ，想通过插值的方式设置它的 disable 属性，需要这样做：
// ...
在属性中插值，需要通过字符串的形式读取 data 中的值，不可以使用双大括号。现在，这个 button 就被 disable 掉了。
vue 中也支持表达式插值：
{{ btnState ? "The button is disabled" : "The button is active"}}
用双大括号将表达式括起来。此时页面上会显示：The button is disabled。当然，你可以表达式中添加更加复杂的逻辑。
2、指令(Directives)指令 (Directives) 是带有 v- 前缀的特殊特性。它的作用是什么呢？就是当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。我们看看几个例子：
v-for :
- {{ todo.text }}
v-for 指令可以绑定数组的数据来渲染一个项目列表：
· 学习 JavaScript · 学习 Vue · 学习 前端
v-if 和 v-else :
// add this
- {{ todo.text }}
You have more than 1 todo
You have no todos
这里，v-if 指令将根据表达式的值的真假来插入/移除
元素。
关于更多 vue 指令，可以查看 vue 指令 api，这里不再一一讲述。
四、事件处理vue 中可以用 v-on 指令监听 DOM 事件，并在触发时运行相关 JavaScript 代码。我们通过几个例子来看看 vue 中的事件处理。
1、计数器{{ counter }}
点击 button , 计数器递增 +1。+1 的逻辑写在了 v-on 指令里面，显然这是不可取的，许多事件处理逻辑会更为复杂。
在 Vue 组件中，都有一个 data 属性，也有一个 methods 属性。该属性是一个对象，我们可以在对象中定义方法。对于上面的例子，我们可以把点击 button 之后的处理逻辑放在 methods 中，click 事件调用 methods 中的方法：
2、事件修饰符{{ counter }}
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。虽然我们可以在事件的响应函数里面来做这些事情，但是 vue 提供了一个更优雅的方式来实现它 —— 事件修饰符，保证了事件处理函数的干净纯粹：只关注数据处理逻辑。
修饰符是由点开头的指令后缀来表示的，我们把相应的修饰符添加在事件名称后面就好了，如：
.stop
.prevent
.capture
.self
.once
.passive
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。注意这一点对我们定位 bug 时很关键。五、处理用户输入
我们可以用 v-model 指令来处理用户输入。 v-model 指令可以在表单 、 // 不生效 -->
4、复选按钮
Picked: {{ picked }}
绑定到布尔值：
绑定到同一个数组：
5、选择框
Checked names: {{ checkedNames }}
Selected: {{ selected }}
6、动态选项
Selected: {{ selected }}
非常常见的一个场景是，用 v-for 渲染的动态选项：
六、样式Selected: {{ selected }}
在 HelloWorld 组件中，有一组 style 标签：
这就意味着我们可以在这个组件中定义任何样式。默认 style 标签上加了一个 scoped 属性，表示样式只在本组件内部生效，不用担心会影响其他组件。
1、链接到外部样式表 2、class 绑定在 vue 中 class 绑定和 style 绑定都是用 v-bind 指令。 v-bind 指令允许我们动态控制何时以及是否应用 CSS 类和样式，以及 CSS 属性和值。看看怎么使用：
打开浏览器，我们会看到一个紫色的长方形。如果想在 showBanner 为 false 的时候显示长方形，只需要对 showBanner 取反即可：
那如果需要绑定多个 class ，要怎么办呢？
用逗号分隔，然后在组件的 data 中定义另一个布尔属性，并在样式中定义 .another-class 即可。
但是如果 calss 继续增多，这种方式会让 template 变得很不干净，我们可以这样修改：
class 绑定的数据对象不必内联定义在模板里，抽离出来放在 data 函数的返回值里面。
3、style 绑定和 class 绑定一样，vue 也使用 v-bind 指令来绑定 style :
为了让模板更加干净，我们也可以像下面这样调整：
注意：css 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 来命名。使用短横线分割时，需要用单引号把属性名括起来。七、 Todolist
学习完 Vue 的基础语法，我们可以写一个 Todolist 来检验一下自己：
代码可参考：https://github.com/IDeepspace...
欢迎关注我的博客：https://togoblog.cn/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101451.html
摘要：菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数，可以通过来返回函数值。它们都有前缀，以便与用户定义的属性区分开来。 开篇语 我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...
摘要：在模板中放入太多的逻辑会让模板过重且难以维护。它会根据控件类型自动选取正确的方法来更新元素。指令需要使用的语法，指的是原数据数组，指的是迭代的数组元素。 注：本教程所使用的vue版本为 2.5.16 MVC与MVVM MVC（Model-View-Controller）： M指的是从后台获取到的数据， V指的是显示动态数据的html页面， C是指响应用户操作、经过业务逻辑处理后去更新...
摘要：与绑定数据绑定一个常见需求是操作元素的列表和它的内联样式。两者只能选其一对象语法我们可以传给一个对象，以动态地切换。注意不支持语法。相比之下，简单得多元素始终被编译并保留，只是简单地基于切换。这意味着将分别重复运行于每个循环中。 vue Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用 v-bind 处理...
摘要：与绑定据绑定一个常见需求是操作元素的列表和它的内联样式用绑定绑定语法有对象语法数组语法计算属性语法用数组的方法用计算属性传值绑定语法用在组件时这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖。这些方法如下过滤和排序 vue.js Class 与 Style 绑定 据绑定一个常见需求是操作元素的 class 列表和它的内联样式用v-bind绑定 *绑定语法 有 对象语法 ...
摘要：学完的基础语法之后，练手一下，从最基本的留言板开刀吧。功能不多，主要为了熟悉的基础语法使用。 学完vue的基础语法之后，练手一下，从最基本的留言板开刀吧。功能不多，主要为了熟悉vue的基础语法使用。详细vue教程请移步vue.js 2.0 技术框架 1.vue.js 2.0 2.bootstrap 语法概述 这里只写一点此例子用到的一些语法知识，详细API请移步：vue 2.0 a...
阅读 2386·2021-09-01 10:41
阅读 1413·2019-08-30 14:12
阅读 467·2019-08-29 12:32
阅读 2827·2019-08-29 12:25
阅读 2917·2019-08-28 18:30
阅读 1677·2019-08-26 11:47
阅读 941·2019-08-26 10:35
阅读 2560·2019-08-23 18:06
