01慕课网《vue.js2.5入门》——基础知识
前端框架
Vue.js2.5 2018-05-12
Vue官网：https://cn.vuejs.org/
基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList
Vue基础语法
创建Vue实例
下载后直接在<head>中<script >引入
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src="./vue.js"></script>
</head>
引用CDN：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
挂载点、模板与实例
挂载点：指页面标签，挂载Vue
模板：挂载点下的内容
实例：JavaScript中new Vue()实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src="./vue.js"></script>
</head>
<body>
<!--挂载点、模板、实例之间的关系
div为挂载点，通过ID绑定
模板可以写到挂载点内部和实例中-->
<div id="root">{{msg}}
<!--挂载点内部的内容为模板-->
<p>这里是挂载点内部的模板{{temMsg}}</p>
</div>
<script>
// vue实例
new Vue({
//指定实例的挂载点，Vue去接管哪个元素内容，绑定DOM节点
el: "#root",
// 模板也可以写到实例中,但是这样挂载点中的内容就不会被显示
template:'<i>这里是实例中的模板{{temMsg}}</i>',
// 数据内容
data: {
msg: "hello world",
temMsg:"template"
}
});
</script>
</body>
</html>
Vue实例中的数据
数据对象： data
页面引用实例中的数据：
{{}}、v-text、v-html
<body>
<div id="root">
<!--{{}}为插值表达式语法
v-text:Vue中的指令，只能输出文本，会转义
v-html:Vue中的指令,可以输出标签，不会转义
-->
<ul>
<li>{{msg}}</li>
<li v-text="vText"></li>
<li v-html="vHtml"></li>
<li v-text="content"></li>
<li v-html="content"></li>
</ul>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
msg: "{{}}双括号插值表达式",
vText: "v-text是Vue指令",
vHtml:"v-html是Vue指令",
content:"<i>测试v-text和v-html之间的不同</i>"
}
});
</script>
</body>
Vue中的事件和方法
给元素绑定事件 v-on：也可以简写为@
函数对象：methods
Vue的特点：面向数据编程，不需要操作DOM，数据改变，页面改变
<body>
<div id="root">
<!--
v-on:Vue绑定事件,
改变挂载点中的内容不要操作DOM，应该修改实例中的数据
-->
<ul>
<li v-on:click="()=>{alert('绑定了点击事件 v-on:click')}">{{msg}}:箭头函数有问题</li>
<li v-on:click="handleClick">{{msg}}:引用实例中methods对象下的方法</li>
<li @click="changeData">{{changeMsg}}</li>
</ul>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
msg: "v-on:click 点击事件",
changeMsg: "点击改变内容"
},
methods: {
handleClick: function () {
alert("绑定了点击事件 v-on:click")
},
changeData: function () {
// this指向data 修改数据
this.changeMsg="内容被改变";
}
}
})
;
</script>
</body>
属性绑定
属性绑定 v-bind:title='变量名',可以写成 :title='变量名'，模板指令
变量名是Vue数据data对象的一个属性，
=号后面是一个js表达式，可以='输入汉字+title'
<div id="root">
<ul>
<li title="title 的名字">鼠标移动过来显示</li>
<li v-bind:title="title">属性绑定</li>
<!-- =号后边为js表达式 title 是变量-->
<li :title="'这是一个'+ title">属性绑定</li>
</ul>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
title: "实例中的数据"
}
})
</script>
双向数据绑定
单向绑定：数据决定页面的显示，页面无法决定数据中的内容
双向绑定：模板指令v-model,页面和数据内容任何一个改变，另一个也改变
<div id="root">
<ul>
<li><input :value="content"/></li>
<li><input v-model="content"/></li>
<li>{{content}}</li>
</ul>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
content: "this is content!"
}
})
</script>
计算属性与侦听器
computed对象中的属性由其它属性计算而来，
其它依赖属性没有变化会使用缓存值，不重新计算
watch:侦听器对象；监听数据变化，数据被改变则触发
<div id="root">
<ul>
<li>姓：<input v-model="firstName"/></li>
<li>名：<input v-model="lastName"/></li>
<li>{{firstName}}{{lastName}}</li>
<li>fullName 属性计算：{{fullName}}</li>
<li>侦听姓名修改次数：{{count}}</li>
<li>侦听fullName数据变化：{{fullCount}}</li>
</ul>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
firstName: "",
lastName: "",
count: 0,
fullCount: 0
},
// 计算属性：由其它属性计算而来
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
},
// 侦听器：监听数据变化
watch: {
// 侦听数据属性
firstName: function () {
this.count++;
},
lastName: function () {
this.count++;
},
// 侦听计算属性
fullName: function () {
return this.fullCount++;
}
}
})
</script>
v-if、v-show、v-for指令
v-if：控制DOM的存在与否，false直接删除DOM
v-show：控制DOM的显示与否，隐藏标签DOM
v-for：遍历数据，循环展示数据，增加 :key=‘item’ 提升效率，但是key值不能相同
<div id="root">
<ul>
<li><p v-if="show">hello world</p></li>
<li><p v-show="show">hello world</p></li>
<li>
<button @click="handleClick">toggle</button>
</li>
</ul>
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
show: true,
list: [1, 2, 3]
},
methods: {
handleClick: function () {
this.show = !this.show;
}
}
})
</script>
参考菜鸟驿站《Vue.js 入门教程》：http://www.runoob.com/w3cnote/vue-js-quickstart.html
01慕课网《vue.js2.5入门》——基础知识的更多相关文章
- 01慕课网《进击Node.js基础（一）》Node.js安装，创建例子
版本:偶数位为稳定版本,基数为非稳定版本 - 0.6.x - 0.7.x - 0.8.x -0.9.x -0.10.x -0.11.x 概念:Node.js采用谷歌浏览器的V8引擎,用C ...
- Vue 2.0入门基础知识之全局API
3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...
- Vue 2.0入门基础知识之内部指令
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...
- 04慕课网《vue.js2.5入门》——Vue-cli开发todolist
主要文件目录: 文件代码: 根实例,初始化vue: <!--index.html,网站入口页面,和main.jsp组成一套.vue文件,包含--> <!DOCTYPE html> ...
- 10慕课网《进击Node.js基础（一）》初识promise
首先用最简单的方式实现一个动画效果 <!doctype> <html> <head> <title>Promise animation</titl ...
- 07慕课网《进击Node.js基础（一）》HTTP小爬虫
获取HTML页面 var http = require('http') var url='http://www.imooc.com/learn/348' http.get(url,function(r ...
- USB入门基础知识（转）
源:USB入门基础知识 相关名词: 主机(Host) 设备(Device) 接口(Interface) 管道(Pipe) 管道是主机与设备端点数据传输的连接通道,代表了主机的数据缓冲区与设备端点之间交 ...
- Linux入门基础知识
注:内容系兄弟连Linux教程(百度传课:史上最牛的Linux视频教程)的学习笔记. Linux入门基础知识 1. Unix和Linux发展历史 二者就像父子关系,当然Unix是老爹.1965年,MI ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- Greenplum入门——基础知识、安装、常用函数
Greenplum入门——基础知识.安装.常用函数 2017年10月08日 22:03:09 在咖啡里溺水的鱼 阅读数:8709 版权声明:本文为博主原创,允许非商业性质转载但请注明原作者和出处 ...
随机推荐
- yyy loves Maths VII（状压DP）
题目背景 yyy对某些数字有着情有独钟的喜爱,他叫他们为幸运数字;然而他作死太多,所以把自己讨厌的数字成为"厄运数字" 题目描述 一群同学在和yyy玩一个游戏 每次,他们会给yyy ...
- Linux基础-4.正文处理命令及tar命令
1.使用cat命令进行文件的纵向合并 1)掌握使用cat命令的纵向合并 a)例如:使用cat命令将test1.file1.txt和file2这三个文件纵向合并为file文件的命令为: cat test ...
- js身份证校验
通过js实现对15位或者18位身份证格式校验: 通过调用idCardNoUtil.checkeIdCardNo(idCardNo)传入身份证号码,实现校验. var idCardNoUtil = { ...
- laravel5.5源码笔记（三、门面类facade）
上次说了provider,那么这次来说说facade 首先是启动的源头,从laravel的kernel类中的$bootstrappers 数组,我们可以看到它的一些系统引导方法,其中的Register ...
- PE 学习之路 —— 区块表
1. 前述 在 NT 头结束后,紧接着就是区块表,区块表包含每个块在映象中的信息,分别指向不同的区块实体. 2. 区块表 区块表是一个 IMAGE_SECTION_HEADER 结构数组,这个结构包含 ...
- 需求：加一个下拉框选择条件改变饼图内外环 饼图：百度echarts提供
1.1:下拉框条件:后台取得ViewBag传给前台 MonitorController: public ActionResult BigData(): //下拉框筛选条件 var result = M ...
- C++快速开发样本工程的建立--编写常用组件
在添加的main.h里面添加如下功能: 主要使用标准C++和boost,界面部分采用QT 1.运行目录环境 2.使用的字体 3.使用的样式 4.使用的主题
- [Golang学习笔记] 01 工作区和GOPATH
Go语言3个环境变量: GOROOT:GO语言按照根路径,也就是GO语言的安装路径. GOPATH:若干工作区目录的路径.是我自己定义的工作空间. GOBIN:GO程序生成的可执行文件(executa ...
- （数据科学学习手札51）用pymysql来操控MySQL数据库
一.简介 pymysql是Python中专门用来操控MySQL数据库的模块,通过pymysql,可以编写简短的脚本来方便快捷地操控MySQL数据库,本文就将针对pymysql的基本功能进行介绍: 二. ...
- WPF 背景颜色渐变的滑动条实现
原文:WPF 背景颜色渐变的滑动条实现 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83507 ...