vue学习

Vue

安装

CDN

对于制作原型或学习，你可以这样使用最新版本：

Plain Text

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

Plain Text

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

Plain Text

基础

插值语法（Mustache语法）：{{}}

v-on：用于绑定HTML事件 ：v-on:click：点击

@click：点击（简写）

@mouseover：鼠标经过

v-bind：用于设置HTML属性：一般v-bind:href 缩写为 :href

v-model：在表单控件元素上创建双向数据绑定：

等价于

声明式渲染

HTML

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

JavaScript

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 titleattribute 和 Vue 实例的 message property 保持一致”。

条件与循环

v-if,v-if-else,v-else:else里面没有，“”中可以是运算符，插值语法等

v-for：

处理用户输入

v-on是用来给目标元素绑定事件的，事件的类型由参数决定。

v-model：双向绑定

模板语法

文本

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

输出原始html

Attribute性质

attribute：是HTML标签上的某个属性，如id、class、value等以及自定义属性，它的值只能是字符串 ，关于这个属性一共有三个相关的方法，setAttribute、getAttribute、removeAttribute；

property：是js获取的DOM对象上的属性值，比如a，你可以将它看作为一个基本的js对象。这个节点包括很多property，比如value，className以及一些方法onclik等方法。