Vue2--入门学习
看了慕课网的教学视频，觉得挺不错的，在此做个随堂记录，有兴趣的可以去看视频
vue版本：2.5
文档链接：https://v2.cn.vuejs.org/v2/guide/installation.html
视频链接：https://www.imooc.com/video/16976
在vue官网下载开发版本的vue.js，并复制其代码到编译器中创建的vue.js文件中
然后在创建index.html文件，在head部引用这个文件，就可以了
1、第一个vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="./vue.js"></script> <!--引用js库文件-->
</head>
<body>
<div id="root"> <!--vue实例的挂载点-->
<h1>{{msg}}</h1> <!--{{变量名}}:插值表达式，接收data里对应变量名的值-->
</div>
<script>
new Vue({ //使用new创建实例
el: "#root", //接收id=root的元素，将实例与模板进行绑定
//template: '<h1>{{msg}}</h1>', 模板内容，等同于<div>里的内容
data:{ //vue实例内的数据板块
msg: "hello world"
}
})
</script>
</body>
</html>
效果展示：
2、挂载点，模板，实例之间的关系/数据，事件与方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>挂载点，模板，实例之间的关系/数据，事件与方法</title>
<script src="./vue.js"></script> <!--引用js库文件-->
</head>
<body>
<div id="root"> <!--vue实例的挂载点,里面的数据为模板内容-->
<h1>hello {{msg}}</h1> <!--{{变量名}}:插值表达式，接收实例data里对应变量名的值-->
<h2 v-text="content"></h2> <!--v-text：接收后面的变量值-->
<h4 v-html="content"></h4> <!--与v-text的区别在于：v-html不会转义-->
<div v-on:click="handleClick">{{contents}}</div> <!--鼠标点击，引发事件，方法为handleClick-->
<div @click="handleClick">{{contents}}</div> <!--v-on的简写-->
</div>
<script>
new Vue({ //使用new创建实例
el: "#root", //接收id=root的元素，将实例与模板进行绑定
data:{ //vue实例内的数据板块
msg: "hello world",
content: "<h1>hello</h1>",
contents: "hello"
},
methods:{ //vue实例内的函数板块
handleClick: function () { //handleClick方法的具体函数
this.contents = "world" //为vue实例里data下的contents变量，重新赋值
}
}
})
</script>
</body>
</html>
效果展示：点击最下面两个hello，会变成world
3、属性绑定和双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定和双向数据绑定</title>
<!--单向绑定：数据决定页面的内容，但页面不可改变数据内容；双向绑定：页面亦可改变数据内容-->
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!--<div title="this is hello world">hello world</div>;title: 鼠标放在hello world上时展示的提示语;-->
<div :title="title">hello world</div> <!--v-bind:属性与数据向绑定;可缩写为:-->
<input v-model="content"/> <!--v-model:模板指令，当页面的content改变时，数据data里的content也相应改变-->
<div>{{content}}</div> <!--为双向绑定做验证，页面上应跟v-model的数据一致-->
</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is hello world",
content:"this is content"
}
})
</script>
</body>
</html>
效果展示：修改表框内的数据，其下一行会随着改变
4、计算属性与侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性与侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName: '',
lastName: '',
count: 0
},
computed:{ <!--计算属性：一个属性由其他属性计算得来；当其他属性无变化时，fullName不会变更，会使用上一次计算的缓存，只有当其他属性有变化时才变化-->
fullName: function (){
return this.firstName + ' ' + this.lastName
}
},
watch:{ <!--侦听器，监听属性的变化-->
firstName: function (){ <!--当firstName属性变化时，做下面的动作-->
this.count ++
},
lastName: function (){
this.count ++
}
}
})
</script>
</body>
</html>
效果展示：随着输入姓名的次数变化，最下面的计数值也会随着增加
5、v-if,v-show,v-for指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if,v-show,v-for 指令</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="show">hello world</div> <!--通过点击按钮，显示或隐藏文本；show=ture时才会显示-->
<div v-show="show">hello world</div> <!--跟v-if的区别：v-show是用css标签来隐藏div，而if是直接删除此div标签，如果需要频繁显示与隐藏的话，建议使用v-show，其他用v-if-->
<button @click="handleClick">toggle</button> <!--button:标记一个按钮-->
<ul>
<li v-for="(item, index) of list" :key="index">{{item}}</li> <!--循环获取list的数值和下标，对应变量item，index，并展示item；需要添加:key属性来提升性能，key值不能相同，若需频繁对列表进行表更，则不适用index-->
</ul>
</div>
<script>
new Vue({
el:"#root",
data: {
show: true,
list: [1,2,3]
},
methods: {
handleClick: function () {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
效果展示：点击toggle按钮，显示或隐藏hello world
6、TodoList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/> <!--v-model:模板指令，双向绑定-->
<button @click="handleSubmit">提交</button> <!--鼠标点击，引发事件，方法为handleSubmit-->
</div>
<ul>
<!--使用组件，通过content 属性传递数值;@delete：监听子组件的变化-->
<todo-item v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
<script> //创建一个组件：全局组件，一个组件就是一个vue实例
Vue.component('todo-item', {
props: ['content','index'], //接收传递的数值，index为下标
template: '<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function () {
//alert('clicked') //弹窗提示
this.$emit('delete',this.index) //向外触发名称为delete的事件，对应值为index，与父组件形成发布--订阅模式，
}
}
}) //定义一个局部组件
// var TodoItem = {
// template: '<li>{{item}}</li>'
// } new Vue({
el:"#root",
// components: {
// 'todo-item': TodoItem //使用局部组件时，需绑定
// },
data: {
inputValue: '',
list: []
},
//若没有定义模板template，则挂载点下所有的实例为模板
methods: {
handleSubmit: function () { <!--将提交的数据inputValue赋值到list中,并清空输入的值-->
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete: function (index) {
this.list.splice(index,1) //删除list中对应下标index的数值
}
}
})
</script>
</body>
</html>
效果展示：
在页框内输入数据，点击提交，将会展示在列表中，并清空页框内的数据
鼠标点击列表数据，将会进行删除
Vue2--入门学习的更多相关文章
- vue2 入门 教程 单页应用最佳实战[*****]
推荐 vue2 入门 教程 -------- 看过其他的,再看作者的,很赞 vue2 入门 教程 单页应用最佳实战 : 具体在 https://github.com/MeCKodo/vue-tuto ...
- Vue2.0学习--Vue数据通信详解
一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...
- vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
- Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
- PyQt4入门学习笔记（三）
# PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
- PyQt4入门学习笔记（一）
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
- Hadoop入门学习笔记---part2
在<Hadoop入门学习笔记---part1>中感觉自己虽然总结的比较详细,但是始终感觉有点凌乱.不够系统化,不够简洁.经过自己的推敲和总结,现在在此处概括性的总结一下,认为在准备搭建ha ...
- Retrofit 入门学习
Retrofit 入门学习官方RetrofitAPI 官方的一个例子 public interface GitHubService { @GET("users/{user}/repos&qu ...
- MyBatis入门学习教程-使用MyBatis对表执行CRUD操作
上一篇MyBatis学习总结(一)--MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对use ...
随机推荐
- L3-008 喊山
#include <bits/stdc++.h> using namespace std; using pii = pair<int, int>; const int N = ...
- Kotlin协程系列(二)
在进行业务开发时,我们通常会基于官方的协程框架(kotlinx.coroutines)来运用Kotlin协程优化异步逻辑,不过这个框架过于庞大和复杂,如果直接接触它容易被劝退.所以,为了我们在后续的学 ...
- 黑客玩具入门——2、Kali常用命令与简单工具
一.Linux常用命令 首先,我们启动kali系统,然后点击这里的命令行工具. 就可以使用下面学习的命令了,另外,如果你有过计算机基础,那么Mac的terminal和Git的gitbash,都是可以练 ...
- 2018CCPC桂林 A（贪心，思维）
题目 分析:首先发现将大的数放在小的数前面结果更优,于是想到通过比较元素大小的方式将两个数组合并,大的放前面小的放后面,但很容易就能想到比这样合并更优的方案.一开始我是想先按这种方式进行合并,然后将最 ...
- # [AI]多模态聚类能力助力AI完成自主意识测试
引言 探讨人工智能是否能形成自我意识,是一个当前AI领域一个重要而又复杂的问题.随着深度学习和强化学习技术的不断进步,计算机在视觉识别.语音识别和控制机器人等方面都已取得长足的进展,模拟和超越人类的一 ...
- 聊聊大数据框架的数据更新策略: COW,MOR,MOW
大数据框架下,常用的数据更新策略有三种: COW: copy-on-write, 写时复制; MOR: merge-on-read, 读时合并; MOW: merge-on-write, 写时合并; ...
- 解密视频魔法：将ExternalOES纹理转化为TEXTURE_2D纹理
在使用OpenGL ES进行图形图像开发时,我们常使用GL_TEXTURE_2D纹理类型,它提供了对标准2D图像的处理能力.这种纹理类型适用于大多数场景,可以用于展示静态贴图.渲染2D图形和进行图像处 ...
- Python——Html（语法、格式、段落、文字处理、路径、超链接、图片、视频）
HTML(Hyper Text Markup Language超文本标记语言)用特殊的一种标签把需要特殊展示出来的内容圈起来.这就是标记语言语法规则 <标记>被标记的内容</标记&g ...
- Mysql性能优化这5点你知道吗？简单却容易被初学者忽略！
Mysql性能优化这5点你知道吗?简单却容易被初学者忽略! 文编|JavaBuild 哈喽,大家好呀!我是JavaBuild,以后可以喊我鸟哥,嘿嘿!俺滴座右铭是不在沉默中爆发,就在沉默中灭亡,一起加 ...
- Java 8升级Java 11，升级必知要点！竟然有这些坑…
随着技术的不断进步,Java作为一种广泛使用的编程语言,其版本更新带来了许多新特性和性能提升.从Java 8升级到Java 11,是一个重要的转变,它不仅带来了新的编程范式,还引入了对现代软件开发的多 ...