Vue入门演示
工作中用了很久vue,但是都是我们这边前端经理封装好的组件,想要看到底部的原理还要从层层代码里面剥离出来,逻辑太复杂,还不如自己一点点整理一下,一步一步走下去.
github地址:https://github.com/manlili/vue_learn里面的lesson01
目录如下:
一 单向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/vue.js"></script>
</head>
<body>
<div class="test">
{{message}}
</div>
<script>
var vue = new Vue({
el: ".test", //必须有el
data:{
message:"这是个测试"
}
})
</script>
</body>
</html>
二 双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue双向数据成功</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="js/vue.js"></script>
</head>
<body>
<div class="test"> <!--注意文本和input要在同一个el下面,要不然input输入改变不了p里面内容-->
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
<script>
var vue = new Vue({
el: ".test", //必须有el
data:{
message:"这是个测试"
}
})
</script>
</body>
</html>
三 访问数组数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue数组</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="js/vue.js"></script>
</head>
<body>
<ul class="test" v-for="item in message">
<li>{{item}}</li>
</ul>
<script>
var vue = new Vue({
el: ".test", //必须有el
data:{
message:["aa","bb","cc"]
}
})
</script>
</body>
</html>
四 访问数组中对象数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue数组中对象</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="js/vue.js"></script>
</head>
<body>
<ul class="test" v-for="item in message">
<li>{{item.name}}</li>
</ul>
<script>
var vue = new Vue({
el: ".test", //必须有el
data:{
message:[{name:"lili"},{name:"haha"},{name:"kkkk"}], //注意此处name这个key值必须保持一致,要不然数组循环没法访问不同的key值
}
})
</script>
</body>
</html>
五 vue方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue方法</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="js/vue.js"></script>
</head>
<body>
<div class="test">
<p class="pp">{{message}}</p>
<button @click="changeColor">使用vue方法</button>
</div>
<script>
var vue = new Vue({
el: ".test", //必须有el
data:{
message:"这是个测试"
},
methods:{
changeColor:function () {
document.getElementsByClassName("pp")[0].style.color="#ff0000";
}
}
})
</script>
</body>
</html>
Vue入门演示的更多相关文章
- Vue入门（二）之数据绑定
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门系列（三）之Vue列表渲染及条件渲染实战
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- Vue 入门之数据绑定
什么是双向绑定? Vue 框架很核心的功能就是双向的数据绑定. 双向是指:HTML 标签数据 绑定到 Vue 对象,另外反方向数据也是绑定的.通俗点说就是,Vue 对象的改变会直接影响到 HTML 的 ...
- Vue 入门之概念
Vue 简介 Vue 是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 [view].新的 Vue 版本参考了 React 的部分设计,当然也有自己独特的地方,比如 Vue 的单文件组 ...
- 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.{{}}. 隐藏未编译的标 ...
随机推荐
- 将Word转为带书签的PDF
将word文档存为PDF可以带来很多便利,在这里就不多说了.下面讨论一下转换方法. 我现在使用的是Word2010+Acrobat9,所以这里仅讨论使用这种组合的转换方法. 在Word2010中有两种 ...
- 理解RxJava:(四)Reactive Android
在前三部分,我在通用层面介绍了RxJava的工作原理.但是作为一个Android开发者,如何在工作中使用它呢?下面是一些给Android开发者的RxJava的具体应用. RxAndroid RxAnd ...
- C 语言函数参数只能传指针，不能传数组
今天被要求编写一个C/C++冒泡算法的程序,心想这还不是手到擒来的事儿,虽然最近都是用Javascript程序,很少写C/C++程序,但是好歹也用过那么多年的C语言: 首先想的是怎么让自己的代码看上去 ...
- [转]make: 警告:检测到时钟错误。您的创建可能是不完整的。
转自http://blog.csdn.net/maopig/article/details/6599660 我在make的时候也出现了同样的问题,不过不是什么大问题,这个不影响编译结果 分析原因可能是 ...
- Web services 安全 - HTTP Basic Authentication
根据 RFC2617 的规定,HTTP 有两种标准的认证方式,即,BASIC 和 DIGEST.HTTP Basic Authentication 是指客户端必须使用用户名和密码在一个指定的域 (Re ...
- 破解android手机图形锁
安卓手机的图形锁包括3*3,4*4,5*5的点阵,按次序连接数个点从而达到锁定/解锁的功能.以3*3为例,最少需要连接4个点,最多能连接9个点.在我们进行绘制图形的过程中,每选中这9个点中的一个点,实 ...
- IOS学习之路七(使用 Operation 异步运行任务)
在 application delegate 头文件(.h)中声明一个 operation 队列和两个 invocation operations: #import <UIKit/UIKit.h ...
- 为什么移动Web应用程序很慢（译）
前些日子,看到Herb Sutter在自己的博客中推荐了一篇文章<Why mobile web apps are slow>,在推荐里他这样写道: “I don’t often link ...
- android小技巧和注意事项
在listView 或者 gridView 的使用中,通常不仅仅为了展现数据,更多的是操作数据.于是当控件重合在一起时,我们需要添加事件.就会出现一个问题,当点击一个控件和长按这个控件时,常常出现长按 ...
- 将查询字符串解析转换为泛型List的名值集合.
///<summary> ///将查询字符串解析转换为泛型List的名值集合. ///</summary> ///<param name="queryStrin ...