一、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 学习内容: ...
随机推荐
- [AT697]フィボナッチ
题目大意:给你$n,k(n\leqslant10^9,k\leqslant10^3)$,求$f_n$.$f$数组满足$f_1=f_2=\cdots=f_k=1$,$f_n=\sum\limits_{i ...
- Rotting Oranges - LeetCode
目录 题目链接 注意点 解法 小结 题目链接 Rotting Oranges - LeetCode 注意点 解法 解法一:bfs.首先先统计所有新鲜的橘子数目fresh,如果fresh大于0则一直执行 ...
- 【spoj SUBST1】 New Distinct Substrings
http://www.spoj.com/problems/SUBST1/ (题目链接) 题意 求字符串的不相同的子串个数 Solution 后缀数组论文题. 每个子串一定是某个后缀的前缀,那么原问题等 ...
- 开源入侵检测系统SELKS系统搭建
一.系统环境配置 系统环境:centos7x64 ip地址:172.16.91.130 1.设置静态IP地址 [root@localhost backlion]#vi /etc/sys ...
- 域hash值破解的总结经验
1.vsssown.vbs拷贝域数据库: 1.1上传vssown.vbs文件 上传cscript.exe和vssown.vbs到域服务器上 1.2创建快照 reg query HKEY_LOCAL_M ...
- listview android:cacheColorHint,android:listSelector属性作用（转）
ListView是常用的显示控件,默认背景是和系统窗口一样的透明色,如果给ListView加上背景图片,或者背景颜色时,滚动时listView会黑掉, 原因是,滚动时,列表里面的view重绘时,用的依 ...
- 解题：BZOJ 3884 上帝与集合的正确用法
题面 好久以前写的,发现自己居然一直没有写题解=.= 扩展欧拉定理:在$b>φ(p)$时有$a^b \equiv a^{b\%φ(p)+φ(p)}(mod$ $p)$ 然后每次递归那个$a^{b ...
- 解题：NOI 1999 生日蛋糕
题面 裸的搜索题,就说剪枝(注:nw->noww->当前,res->rest->剩余): 1.想达到$Nπ$的体积,那么半径一开始最多也就$sqrt(n)$了,再大就超了... ...
- Python如何引入自定义模块?
Python运行环境在查找库文件时是对 sys.path 列表进行遍历,如果我们想在运行环境中注册新的类库,主要有以下四种方法: 1.在sys.path列表中添加新的路径.这里可以在运行环境中直接修改 ...
- 解决ImportError: cannot import name HTTPSHandler
/usr/local/python3.5/bin/pip3.5 install flask 的时候遇到了cannot import name HTTPSHandler 1. 原因在于openssl,o ...