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 学习内容: ...
随机推荐
- Weex 实现文件的下载
需求:在使用weex框架时,我们使用vue文件写页面,在native端加载服务器端的js页面时由于网络状态的不确定性,我们需要在第一次加载的时候对js页面进行本地存储.也就是说我们需要把js文件下载到 ...
- JavaSE Collection集合
集合:是java中提供的一种容器,可以用来存储多个对象.可是我们前面学习的数组也是可以保存多个对象的,为什么还要提供集合容器呢?集合和数组它们有啥区别呢? 数组的长度是固定的.一旦创建完成不能改变长度 ...
- 青蛙的约会（poj1061+欧几里德）
青蛙的约会 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 94174 Accepted: 17412 Descripti ...
- 生成证书申请csr文件
一.执行命令 openssl req -nodes -newkey rsa:2048 -keyout liexiulive.key -out liexiulive.csr 二.根据提示输入基本信息 G ...
- 教你用Cordova打包Vue项目
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...
- css 文本两行显示，超出省略号表示
重点:text-overflow: ellipsis;只对display:inline:起作用 例子: <span class="a">我说说<b class= ...
- 大数据【四】MapReduce（单词计数；二次排序；计数器；join；分布式缓存）
前言: 根据前面的几篇博客学习,现在可以进行MapReduce学习了.本篇博客首先阐述了MapReduce的概念及使用原理,其次直接从五个实验中实践学习(单词计数,二次排序,计数器,join,分 ...
- [Android] Linux下JNI简单实现过程
大概梳理了一下JNI的过程: start->先写好A.java文件,里面添加native方法B,调用库C.so->编译成.class文件->用javac生成.h文件,文件包含Java ...
- HTTP host头
前几天,将一个host误配置为https,导致对方服务解析异常,排查半天,才发现是host导致,故整理一下HTTP host作用. Host:指定请求服务器的域名/IP地址和端口号. 作用:同一台机器 ...
- 【SPL标准库专题(5)】 Datastructures：SplStack & SplQueue
这两个类都是继承自SplDoublyLinkedList,分别派生自SplDoublyLinkedList的堆栈模式和队列模式:所以放在一起来介绍: 堆栈SplStack # 类摘要 SplStack ...