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 学习内容: ...
随机推荐
- SpringBoot+SpringData 整合入门
SpringData概述 SpringData :Spring的一个子项目.用于简化数据库访问,支持NoSQL和关系数据存储.其主要目标是使用数据库的访问变得方便快捷. SpringData 项目所支 ...
- CentOS命令行与shell操作（linux系管与运维二）
原创作品,转载请注明出处:https://www.cnblogs.com/sunshine5683/p/10293729.html 在上篇文章中总结了Linux常用的开机与关机以及重启的命令,今天继续 ...
- Netty中的LoggingHandler()
当添加.addLast("logging", new LoggingHandler(LogLevel.INFO))这行代码时 Netty就会以给定的日志级别打印出LoggingHa ...
- Android照片墙-多图加载
http://blog.csdn.net/guolin_blog/article/details/9526203 照片墙这种功能现在应该算是挺常见了,在很多应用中你都可以经常看到照片墙的身影.它的设计 ...
- 【代码笔记】iOS-NSSearchPathForDirectoriesInDomainsDemo
一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...
- 清除input numer 点击样式
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
- postman获取全局
1.获取token接口时,在test里面输入如下语句 postman.clearGlobalVariable("token"); var jsonData = JSON.parse ...
- ConcurrentDictionary的用法
private static ConcurrentDictionary<Guid, string> dictDbNames = new ConcurrentDictionary<Gu ...
- Origin绘制双Y轴图的方法
1.已有数据绘图如下,其中网络流量的单位是M Bytes/s,与另外两组数据的单位(时间)不同,现在要为其添加右侧Y轴. 2.首先选中该图像,找到工具条,点击第三个按钮“Add Right-Y Lay ...
- SQL语句结合上下文查询（in查询）
在多个表联合查询时,使用linq语句查询就显得不那么方便了,执行效率也不高, SQL语句查询的优势就显现出来了. using (var context = new YZS_TRAEntities()) ...