Vue入门1
欢迎转载，转载请注明出处。
前言
学习本系列Vue知识，需要结合本系列的一些demo。你可以查看我的 Github 或者直接下载 ZIP包 。
建议学习本系列之前已经会一个其他的前端框架，了解计算属性，数据绑定，模板语言等。零基础的话，看本教程可能不太适合。
一、第一个demo，Hello Word
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- 通过双大括号进行数据绑定 -->
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue'
}
});
</script>
</body>
</html>
很简单，el指定Vue实例挂载的元素节点。data里面指定要显示的message的初值。当然，运行是依赖vue.js的，所以要加载script脚本。
二、v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-bind: 将元素的属性跟Vue实例的属性绑定在一起。
将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。
-->
<div id="app">
<!-- 当然也可以缩写成<span :title="message"> -->
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
<script>
var app = new Vue({
el : '#app',
data : {
message : 'You loaded this page on ' + new Date()
}
});
</script>
</body>
</html>
v-bind: 将元素的属性跟Vue实例的属性绑定在一起。
三、v-if v-else指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-if: 控制元素是否显示。
v-else 元素必须紧跟在 v-if 或 v-show 元素的后面——否则它不能被识别。
-->
<div id="app">
<p v-if="seen">Now you see me</p>
<p v-else>seen is false</p>
</div>
<script>
var app = new Vue({
el : '#app',
data : {
seen : false
}
});
</script>
</body>
</html>
四、v-for指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-for: 循环Vue实例的某些数据。用 in
-->
<div id="app">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' }
]
}
});
</script>
</body>
</html>
五、v-on指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-on: 绑定一个监听事件，用于调用我们 Vue 实例中定义的方法
方法定义在methods属性里面.
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
-->
<div id="app">
<p>{{message}}</p>
<!-- 当然也可以缩写成<button @click="changeMessage"> -->
<button v-on:click="changeMessage">Change Message</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js !'
},
methods: {
changeMessage: function(){
this.message = 'message be changed !'
}
}
});
</script>
</body>
</html>
六、v-model指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-model: 可以直接将表单输入的某个值跟Vue实例的属性绑定
-->
<div id="app">
<p>{{message}}</p>
<input v-model="message"></input>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js !'
}
});
</script>
</body>
</html>
Vue入门1的更多相关文章
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- parcel+vue入门
一.parcel简单使用 npm install -D parcel-bundler npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件.) Pa ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- 学习Vue 入门到实战——学习笔记
闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...
随机推荐
- [日常] Go语言圣经--包和文件-导入包习题
1.每个包都有一个全局唯一的导入路径 2.按照惯例,一个包的名字和包的导入路径的最后一个字段相同 练习 2.2: 写一个通用的单位转换程序,用类似cf程序的方式从命令行读取参数,如果缺省的话则是从标准 ...
- MySQL练习题及答案
一.现有三张数据库表,分别为部门表.员工表.部门和员工关系表 1.部门表CREATE TABLE `t_dept` ( `id` int(8) NOT NULL AUTO_INCREMENT, `de ...
- Java基础——死锁
1.关于死锁,百度百科的解释: 死锁是指两个或两个以上的进程在执行过程中,由于竞争资源或者由于彼此通信而造成的一种阻塞的现象,若无外力作用,他们将都无法进行下去.此时称系统处于死锁状态或系统产生了死锁 ...
- 撩课-Web大前端每天5道面试题-Day32
1.module.export.import是什么,有什么作用? module.export.import是ES6用来统一前端模块化方案的设计思路和实现方案. export.import的出现统一了前 ...
- 无框架JavaWeb简单增删改查,纯 jsp小练习
地址 : 纯本人手码 jsp练习>>>>>
- Killing Monsters(hdu4970)
Killing Monsters Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)T ...
- RestfulAPI超简单入门
简单入门 REST -- REpresentational State Transfer,英语的直译就是"表现层状态转移" 是目前最流行的 API 设计规范,用于 Web 数据接口 ...
- EF DataFirst修改数据类型
在做软件的时候我们可能会遇到这样的问题,就是在使用EF的时候,有时候精度不一样, 我们用整数来计算肯定是比浮点数来得快的,但我在MySQL里面存储的数据类型是decimal的,我生成EF后, 里面的数 ...
- Hibernate中的三种数据状态
Hibernate中的三种数据状态(临时.持久.游离) 1.临时态(瞬时态) 不存在于session中,也不存在于数据库中的数据,被称为临时态. 比如:刚刚使用new关键字创建出的对象. 2.持久态 ...
- 【奇技淫巧】绕过waf写文件
今天偶然利用此命令干成了大事,老司机一看就懂命令用法百度搜到的,希望对各位表哥有用echo 48 65 6C 6C 6F 2C 57 6F 72 6C 64 21 >hex.txt::生成 he ...