一、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 学习内容: ...
随机推荐
- 【刷题】洛谷 P3455 [POI2007]ZAP-Queries
题目描述 Byteasar the Cryptographer works on breaking the code of BSA (Byteotian Security Agency). He ha ...
- BZOJ 1013 | 一份写了一堆注释的高斯消元题解
题意 给出\(n\)维直角坐标系中\(n + 1\)个点的坐标,它们都在一个\(n\)维球面上,求球心坐标. 题解 设球面上某两个点坐标为\((a_1, a_2, ... a_n)\)和\((b_1, ...
- 《Linux内核设计与实现》第4章读书笔记
第四章 进程调度 调度程序负责决定将哪个程序投入运行,何时运行以及运行多长时间.进程调度程序可看做在可运行态进程之间分配有限的处理器时间资源的内核子系统.调度程序是像Linux这样的多任务操作系统的基 ...
- 调用Android系统设置项
Intent mIntent = new Intent(); ComponentName comp = new ComponentName("com.android.settings&quo ...
- 2019PKU\THU WC题解
PKU: 机试: d1t1: 考虑拓扑序的合法性,每个点的入边必须先加入.f[S]表示先出来的是S集合的点,对应边的方案数.加入x的时候,把入边方向确定,出边自然后面会确定的 2^n*n d1t2: ...
- C++ public private protect 继承关系(链接)
基础链接 总结: public继承基类成员访问权限没有变化; protected继承基类public和protected权限变为protected,基类private不变. private继承基类p ...
- bzoj 2120
2120: 数颜色 Time Limit: 6 Sec Memory Limit: 259 MBSubmit: 6430 Solved: 2562[Submit][Status][Discuss] ...
- 【Asp.net入门09】第一个ASP.NET 应用程序-处理窗体(1)
我们创建了一个HTML窗体,可以通过它显示受邀参加晚会的嘉宾,但是,当嘉宾单击Submit RSVP按钮时,同一个页面会反复多次显示.为了解决此问题,需要实现一段代码,用于在将窗体数据发布到服务器时执 ...
- linux命令总结之dig命令
Dig简介: Dig是一个在类Unix命令行模式下查询DNS包括NS记录,A记录,MX记录等相关信息的工具.Dig的源码是ISC BIND大包的一部分,但是大多编译和安装Bind的文档都不把它包括在内 ...
- Linux运维四：文件属性及文件权限
一:文件属性 我们使用ls -lhi命令来查看文件时,会列出一堆的文件属性,如: [root@Gin day7]# ll -hi total 7.8M 260674 -rw-r--r-- 1 root ...