vue学习笔记1 - 安装与常用指令
2019-09-25 本文已影响0人
足__迹
官方中文文档;
- 安装： 安装方式有3种
- 对于制作原型或学习，你可以这样使用最新版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue导入方式1</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="box" id = "app">
{{msg}}
</div>
<script>
// vm实例，会控制id 为app元素中的所有内容
// vue 的实例就是MMVM中的VM控制器
let vm = new Vue({
// 需要控制的位置
el:'#app',
// 代码数据，mvvM中的M
data:{
msg:'Hello Vue学习页面1'
}
})
</script>
<style>
#app{
margin: 50px auto;
background: red;
width: 200px;
height: 30px;
}
</style>
</body>
</html>
- 下载导入
-
点击下载
image.png
-
- NPM通过命令行安装(vue_cli脚手架)
> npm install vue
国内建议使用淘宝源cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install vue
指令
指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性
- v-bind : 绑定元素
<span v-bind:title="message">ahhshs</span>
- v-if : if判断
<div id="app3" class="box">
<p v-if='seen'>看见信息</p>
</div>
<script>
let vm = new Vue({
el:'app3',
data:{
seen:'true',
}
}
</script>
- v-for : 循环
<ul v-for= 'i in todos' >
<li>{{i.text}}</li>
<script>
let vm = new Vue({
el:'#app3',
data:{
seen:'true',
todos:[
{text:'111'},
{text:'111'},
{text:'111'},
]
}
</script>
- v-on ： 事件监听器
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
V-monde:双向绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
