一、Vue入门
vue官网：https://cn.vuejs.org/
学习路线：VueJs2.0建议学习路线
在浏览器上安装 Vue Devtools工具
1.vue入门
<script src="vue.js"></script>是引入下载的js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<!--挂载点-->
<div id="app">
<!--模板，也可在js中写-->
<!--{{msg}}插值表达式-->
<h1>nihao {{msg}}</h1>
</div>
<script>
new Vue({
el: "#app",
//template: '<h1>nihao {{msg}}</h1>',//模板
data: {//数据项
msg: "hello"
}
});
</script> </body>
</html>
2.语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入js，使用CDN方式-->
<script src=" https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--{{ }} 插值表达式：用于输出对象属性和函数返回值，可以理解为是v-text-->
<p>{{ message }}</p>
<p>{{ myFun() }}</p>
<br/> <!--v-html 指令用于输出 html 代码-->
<div v-html="a"></div>
<!--v-text渲染数据 指令用于输出 文本 代码-->
<div v-text="a"></div>
<br/> <!--v-bind属性绑定,常用语class属性的绑定 指令被用来响应地更新 HTML 属性-->
<input type="text" v-bind:placeholder="message"/><br/>
<!--v-bind 缩写-->
<input type="text" :placeholder="message"/><br/> <!--v-model双向数据绑定，绑定在input的value，多用在input，select标签中，绑定数据-->
<input type="text" v-model="message"/> +
<input type="text" v-model="message2"/> =
{{addString}} <!--v-if：控制显示 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素，简单来说就是对p标签的新增和插入-->
<p v-if="seen">seen的值为true</p>
<p v-else="seen">seen的值为false</p>
<!--v-show，区别于v-if，有css样式添加和取消的display:none，他不会去创建和新怎dom，所以性能更高
，使用：如果只做一次现影的话用v-if，如果多次切换用v-show-->
<h1 v-show="show">show Hello!</h1> <!-- v-on 指令，事件绑定 它用于监听 DOM 事件-->
<button v-on:click="add">点我+1</button>
<!-- v-on 缩写-->
<button @click="sub">点我-1</button>
<span>{{count}}</span> <!--v-for循环： site in sites -->
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
<!--v-for循环对象-->
<ul>
<!--使用:key=，会提高效率，但是，key值不能相同-->
<li v-for="(value, key, index) in object" :key="index">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
<ul>
<li v-for="n in 5">
{{ n }}
</li>
</ul>
</div> <script>
var vm = new Vue({//实例化 Vue
el: '#app',//el: 元素挂载点，与DOM中节点进行绑定，DOM 元素中的 id
data: {//data 用于定义数据属性
message: 'hello vue',
message2: 'haha',
a: '<a>v-html和v-text区别</a>',
seen: false,
count: 0,
show: true,
sites: [
{name: 'Runoob'},
{name: 'Google'},
{name: 'Taobao'}
],
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
},
computed: {//计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。
addString: function () {
return this.message + this.message2;
}
},
methods: {//methods 用于定义的函数，可以通过 return 来返回函数值
myFun: function () {
return 'function test';
},
add: function () {
return vm.count++;
},
sub: function () {
return vm.count--;
}
},
watch: {//监听器，对象监听的方法，对象发生改变时，例如：count变化,才会回调watch方法
'count': function (val, oldVal) {//val:发生变化的数据，oldVal：变化之前的值
console.log(val, oldVal);
}
}
});
//除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
console.log(vm.message);//vm.data对象中的属性
console.log(vm.$data);//vm.$data,Vue实例的属性data对象
console.log(vm.$el);//vm.$el,获取DOM
console
</script>
</body>
</html>
3.todoList示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="inputValue">
<button @click="putList">提交</button>
</div>
<ul>
<li v-for="(ls,index) in list" :key="index">{{ls}}</li>
</ul> </div>
<script>
new Vue({
el: "#app",
data: {//数据项
inputValue: "",
list:[]
},
methods: {
putList: function () {
this.list.push(this.inputValue);
this.inputValue = "";
}
}
});
</script>
</body>
</html>
一、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.{{}}. 隐藏未编译的标 ...
- 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 学习内容: ...
随机推荐
- 洛谷 P2805 [NOI2009]植物大战僵尸 解题报告
P2805 [NOI2009] 植物大战僵尸 题目描述 Plants vs. Zombies(PVZ)是最近十分风靡的一款小游戏.Plants(植物)和Zombies(僵尸)是游戏的主角,其中Plan ...
- 【bzoj2301】 HAOI2011—Problem b
http://www.lydsy.com/JudgeOnline/problem.php?id=2301 (题目链接) 题意 给出${a,b,c,d,k}$,${n}$组询问,求$${\sum_{i= ...
- CVE-2018-1111劫持dhcp造成centos代码执行漏洞
0x01 漏洞概述 近日,红帽官方发布了安全更新,修复了编号为CVE-2018-1111的远程代码执行漏洞,攻击者可以通过伪造DHCP服务器发送响应包,攻击红帽系统,获取root权限并执行任意命令. ...
- 解题：APIO 2014 序列分割
题面 拆开式子我们发现切割顺序不影响答案,所以可以设计出一个$dp[i][j]$表示到$i$为止切了$j$刀的最大收益之类的,然后做个前缀和就可以转移了. $dp[i][j]=min(dp[i][j] ...
- Facenet Triplet Loss
Triplet Loss 在人脸识别中,Triplet loss被用来进行人脸嵌入的训练.如果你对triplet loss很陌生,可以看一下吴恩达关于这一块的课程.Triplet loss实现起来并不 ...
- Spyder使用IPython Console弹出绘图窗口的设置方法
http://www.datastudy.cc/article/3cfc3aff3b2c5948b938456e00376276 在使用Spyder的过程中,因为它的绘图,默认是绘图在IPython窗 ...
- hihocoder #1162 矩阵加速dp
#1162 : 骨牌覆盖问题·三 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 前两周里,我们讲解了2xN,3xN骨牌覆盖的问题,并且引入了两种不同的递推方法.这一次我 ...
- enumerate 遍历numpy数组
enumerate 遍历numpy数组 觉得有用的话,欢迎一起讨论相互学习~Follow Me 遍历一维数组 i,j 分别表示数组的 索引 和 存储的值 import numpy as np a=np ...
- java Apache common-io 讲解
Apache common-io用户指南 用户指南 Commons-io 包含utility classes,endian classes,line iterator,file filters,fil ...
- Centos7系统中安装Nginx1.8.0
Nginx的安装 tar -zxvf nginx-1.8.0.tar.gz cd nginx-1.8.0 ./configure make make install /usr/local/nginx/ ...