一、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 学习内容: ...
随机推荐
- TJOI2013数字根
题面链接 洛谷 sol 我们先不考虑\(0\),发现数字根\(=\)它\(mod 9\). 我们前缀和一波,把区间和变成两数相减. 对于每个\(v\in\{0-8\}\),(这里面的\(mod 9=0 ...
- 基本数据结构 —— 二叉搜索树（C++实现）
目录 什么是二叉搜索树 二叉搜索树如何储存数值 二叉搜索树的操作 插入一个数值 查询是否包含某个数值 删除某个数值 测试代码 参考资料 什么是二叉搜索树 二叉搜索树(英语:Binary Search ...
- Java EE之JSTL（上）
1.JSP标签和JSTL简介 JSP标签看起来就像普通的HTML或者XML标签一样.一个JSP标签将执行某些操作. 为了引用JSP标签必须使用正确的XML命名空间. <%@ taglib pre ...
- 【bzoj4084】【sdoi2015】双旋转字符串
题解 首先题中说了$n>=m$; 分成的循环串左右两边为本质相同的单循环串循环串,分别长为$l = \frac{n + m}{2} $; 所以$S$串的前$l$位为双循环串的一半$S1$,后一半 ...
- 安装mysql-5.6版本步骤与卸载
官网下载完解压后: 1.环境变量配置Path D:\mysql-5.6.40-winx64\bin(你的mySql5.6的路径到bin)2.找到D:\mysql-5.6.40-winx64文件中的 ...
- print命令
#%s为变量的占位符,s是string的简写,可接受字符. %d也是占位符,用于接受数字name = input("name:")age = input("age:&qu ...
- python函数的 全局变量与局部变量
一.函数的全局变量 1.什么是全局变量 顶着头开始写,没有任何缩进,在py文件的任何位置都能调用 #!/usr/bin/env python # _*_ coding:utf8 _*_ name=&q ...
- 「Vue」自定义指令
#全局自定义指令1.使用Vue.directive()定义全局的指令 v-focus2.参数1 指令的名称,在定义的时候,指令的名称前面不需要加v-前缀3.但是在调用的时候必须在指令名称前 加上v-前 ...
- Go_12：Go命令行处理
概述 常用的命令行参数解析有 2 种方式,一种是不带参数标签直接接上参数值,另外一种就是带有标签的参数解析.第一种我们可以直接通过 os 包提供的原始方法获取,第二种我们需要通过 flag 包来解析获 ...
- google analysis教程
sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...