室友打了一把端游，我入门了Vue
Posted 爪哇贡尘拾Miraitow
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了室友打了一把端游，我入门了Vue相关的知识，希望对你有一定的参考价值。
快速入门Vue
使用工具 vs code
建议使用插件 Live Server Preview（方便快速查看代码效果）
打开官网，我们可以看到如下两种环境
🎈 因为我们是初学者，我们可以直接最好使用开发环境，这会给我们更好的代码提示，让我们更快入门。
根据官网的介绍，我们先入进行入门练习
先导入开发环境
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--先在body里面创建一个div-->
<div id="app">
message
</div>
在js里面写如下的代码
注意：Vue的首字母大写
var app = new Vue(
el: '#app',
data:
message: 'Hello Vue!'
)
全局来看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
message
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" >
message
</div>
<script>
var app=new Vue(
el:"body",
data:
message:"Hello Vue!"
)
</script>
</body>
</html>
运行结果
Hello Vue!
入门总结：
- 导入开发版本的
Vue.js - 创建Vue
实列对象，设置el属性和data属性 - 使用简洁的模板语法把数据渲染到页面
🎃 多种选择器
🎈class选择器
<!--先在body里面创建一个div-->
<div id="app" class="app">
message
</div>
var app = new Vue(
el: '.app',
data:
message: 'Hello Vue!'
)
运行结果
Hello Vue!
🎈标签选择器
只用更改这里
var app = new Vue(
el: 'div',
data:
message: 'Hello Vue!'
)
运行结果
Hello Vue!
🧡 data数据对象
<body>
message
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" class="app">
message
<span>school</span>
<h3>school.name</h3>
<h3>school.mobile</h3>
<h3>like</h3>
<h2>like[0]</h2>
<h2>like[1]</h2>
</div>
<script>
var app=new Vue(
el:"#app",
data:
message:"你好，xxx",
school:
name:"xxx学院",
mobile:"13143xxxxxx"
,
like:["csgo","LOL"]
,
)
</script>
</body>
结果演示
message
你好，xxx "name": "xxx学院", "mobile": "13143xxxxxx"
xxx学院
13143xxxxxx
[ "csgo", "LOL" ]
csgo
LOL
data：数据对象总结
Vue中用到的数据定义在data中data可以写复杂类型的数据- 渲染复杂类型数据时，遵守
js语法即可
💛 Vue 指令
✨设置标签的文本值（textContent）
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" >
<h2 v-text="message">
入门Vue如此简单
</h2>
<h2>入门Vue如此简单message</h2>
</div>
<script>
var app=new Vue(
el:"#app",
data:
message:"生命不息，学习不止",
,
)
</script>
</body>
结果演示
生命不息，学习不止
入门Vue如此简单 生命不息，学习不止
我们可以看到当我们直接使用v-text时，我们的内容会全部被替换，于是我们使用插入法入门message来防止全部替换
当然我们也可以进行字符串拼接
```html
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" >
<h2 v-text="message+'!'">
爪哇贡尘拾Miraitow
</h2>
<h2>爪哇贡尘拾Miraitowinfo+' 加油'</h2>
</div>
<script>
var app=new Vue(
el:"#app",
data:
message:"生命不息，学习不止",
info:"后端路漫漫,什么都要学"
,
)
</script>
</body>
结果演示
生命不息，学习不止!
爪哇贡尘拾Miraitow 后端路漫漫,什么都要学 加油
✨设置标签的innerHtml（v-html）
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" >
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script>
var app=new Vue(
el:"#app",
data:
content:"爪哇贡尘拾Miraitow"
,
)
</script>
</body>
结果演示
爪哇贡尘拾Miraitow
爪哇贡尘拾Miraitow
可以看出来没有什么区别，然后我们做一下修改
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" >
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script>
var app=new Vue(
el:"#app",
data:
// content:"爪哇贡尘拾Miraitow",
content:"<a href='http://www.baidu.com'>爪哇贡尘拾Miraitow</a>"
,
)
</script>
</body>
结果演示
这样我们可以看到这两个的区别了,上面的可以识别标签，我们点击第一个就可以跳转了
✨为元素绑定事件（v-on）
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" >
<input type="button" value="v-on指令" v-on:click="doIt"></input>
</div>
<script>
var app=new Vue(
el:"#app",
methods:
doIt:function()
alert("好好学习，天天向上");
)
</script>
</body>
结果演示
点击事件，当我们点击这个button按钮后就会出现弹窗显示
为了减少代码量还有一种简写的方式
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" >
<input type="button" value="v-on指令" v-on:click="doIt"></input>
<input type="button" value="v-on简写" @click="doIt"></input>
</div>
<script>
var app=new Vue(
el:"#app",
methods:
doIt:function()
alert("爪哇贡尘拾Miraitow");
)
</script>
</body>
结果演示
可以看出来，效果是一样的
接下来看一下双击事件
我们在之前的代码里面加入这一句，其他不变
<input type="button" value="双击事件" @dblclick="doIt"></input>
结果演示
如果你还知道别的事件可以去试试
我们接下来看一下如何修改数据
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" >
//设置一个弹击事件
<h2 @click="changeFood">food</h2>
</div>
<script>
var app=new Vue(
el:"#app",
data:
food:"青椒肉丝"
,
methods:
changeFood:function()
console.log(this.food);
)
</script>
</body>
结果演示
青椒肉丝
当我们点击青椒肉丝时我们打开控制台，我们可以看到输出结果
然后我们去对changeFood函数做一些修改
methods:
changeFood:function()
//console.log(this.food);
//注意你要修改这个东西要使用this
this.food+="好好吃！"
这是我们连续点击之前的青椒肉丝3次
结果演示
青椒肉丝好好吃！好好吃！好好吃！
v-on总结
v-on指令的作用是：为元素绑定事件- 事件名不需要写
on - 指令可以简写为
@ - 绑定的方法定义在
methods属性中 - 方法内部通过
this关键字可以访问定义在data中的数据
学习这么多了，我们来做个计数器，检验学习结果
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" >
//定义单击事件
<button @click="sub">
-
</button>
<span>num</span>
<button @click="add">
+
</button>
</div>
<script>
var app=new Vue(
el:"#app",
data:
num:1
,
methods:
//定义一个增加函数
add:function()
if(this.num<10)
this.num++;
else
//当值大于10弹窗
alert("别点了，我已经最大了！！！")
,
//定义一个减小函数
sub:function()
if (this.num>0)
this.num--;
else
//当值小于零弹窗
alert("别点了，我已经最小了！！！")
,
)
</script>
</body>
结果演示
当我们一直点减号，直到为零继续点时，会出现如下弹窗
当我们一直点加号，直到为10继续点时，会出现如下弹窗
阶段总结：
- 创建Vue实例时：
el(挂载点)，data(数据),methods(方法) v-on指令的作用是绑定事件，简写@- 方法通过
this，关键字获取data的数据 v-text指令的作用：设置元素的文本值，简写为
✨根据表达式的真假，切换元素的显示和隐藏（v-show）
比如：广告和遮罩层
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<img v-show="false" src="./R-C.gif" weight=100px height="100px">
</div>
<script>
var app=new Vue(
以上是关于室友打了一把端游，我入门了Vue的主要内容，如果未能解决你的问题，请参考以下文章