一、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 学习内容: ...
随机推荐
- AtCoder Grand Contest 004
AtCoder Grand Contest 004 A - Divide a Cuboid 翻译 给定一个\(A*B*C\)的立方体,现在要把它分成两个立方体,求出他们的最小体积差. 题解 如果有一条 ...
- POJ 3348 Cows | 凸包——童年的回忆（误）
想当年--还是邱神给我讲的凸包来着-- #include <cstdio> #include <cstring> #include <cmath> #include ...
- 【poj3294】 Life Forms
http://poj.org/problem?id=3294 (题目链接) 题意 给定 n 个字符串,求出现在不小于 k 个字符串中的最长子串. Solution 后缀数组论文题.. 将 n 个字符串 ...
- Web项目开发中用到的缓存技术
在WEB开发中用来应付高流量最有效的办法就是用缓存技术,能有效的提高服务器负载性能,用空间换取时间.缓存一般用来 存储频繁访问的数据 临时存储耗时的计算结果 内存缓存减少磁盘IO 使用缓存的2个主要原 ...
- 【贪心】【CF1061D】 TV Shows
Description 给定 \(n\) 个电视节目和两个参数 \(x,y\).你想要看全部的电视节目,但是同一个电视机同一个时刻只能播放一个电视节目,所以你只能多租赁电视机.在时间 \([l,r]\ ...
- Angular http跨域
原文:Angular http跨域 - 飞翔的小仓鼠 - 博客园 var app = angular.module('Mywind',['ui.router']); app.controller('M ...
- C#线程篇---Windows调度线程准则（3）
Windows本身就是一个抢占式操作系统,它的实现,必定有某种算法在里面,比如什么时候调度哪些线程,需要花费多长时间等问题. 我们时时在用Windows,作为程序员,我们有必要知道其中最贴近我们的算法 ...
- Cannot enlarge string buffer containing XX bytes by XX more bytes
在ELK的数据库报警系统中,发现有台机器报出了下面的错误: 2018-12-04 18:55:26.842 CST,"XXX","XXX",21106,&quo ...
- Docker简介和安装（一）
Docker简介 Docker 是 Docker.Inc 公司开源的一个基于 LXC技术之上构建的Container容器引擎, 源代码托管在 GitHub 上, 基于Go语言并遵从Apache2.0协 ...
- oracle中所有存在不存在的用户都可以使用dba连接到数据库
oracle中所有存在不存在的用户都可以使用dba连接到数据库及解决方式 以前一直使用conn /as sysdba连接数据库,不明白里面的意思.今天无意中使用其他的用户名密码连接到dba竟然也可以( ...