HelloWorld
<!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>Document</title>
<!-- 1. 导入Vue的包 -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
<!-- Vue 实例所控制的这个元素区域，就是我们的 V -->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// 2. 创建一个Vue的实例
// 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
// 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
var vm = new Vue({
el: '#app', // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
// 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
data: { // data 属性中，存放的是 el 中要用到的数据
msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
}
})
</script>
</body>
</html>
v-cloak:
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app">
<p v-cloak>{{ msg }}</p>
</div>
var vm = new Vue({
el:'#app',
data:{
msg:'Hello World'
}
})使用v-cloak时当网速较慢时不会将插值表达式{{ msg }}显示出来,只有当加载完毕时才会渲染到页面上，且使用v-cloak时可以在插值表达式两侧写其他内容并且会显示到页面上
<div id="app">
<p v-cloak>++++++++ {{ msg }} ----------</p>
</div>
结果为：
++++++++ Hello World----------
v-text
但是如果使用v-text则不需要写样式，直接绑定即可解决问题，但是标签中不能写任何内容，否则会被覆盖
<div id="app">
<p v-text="msg"></p>
<p v-text="msg">Hello World</p>
</div>
如上其中第一个p标签和第二个p标签显示的内容是一样的Hello World并不会被显示出来
v-html
如果想把内容当作html来解析则使用v-html,同样v-html标签体中的内容也不会显示
<div id="app">
<div v-html="msg">哈哈哈哈哈哈</div>
</div>
var vm = new Vue({
el:'#app',
data:{
msg:'<h1>这是一个大大的H1</h1>'
}
})v-bind 数据绑定
可以简写为:
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})v-bind是vue中提供的用于绑定属性的指令，v-bind可以简写为:要绑定的属性，v-bind中还可以写合法js表达式如：
<div id="app-2">
<span v-bind:title="message + 'hellod world'">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
事件绑定v-on
可以简写为@
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
<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('')
}
}
})注意reverseMessage方法中，我们不用直接操作DOM即可更新状态
除了v-on:click,v-on事件可以绑定：mouseenter,mouseleave等事件
事件修饰符案例：
<div id="app">
<div class="innder" @click="divhandler">
<button type="button" @click="btnhandler">戳他</button>
</div>
</div>
//创建vue实例得到ViewModel
var vm = new Vue({
el:'#app',
data:{
},
methods:{
divhandler:function(){
console.log('这是触发了inner div的点击事件')
},
btnhandler:function(){
console.log('这是触发了 btn 按钮的点击事件')
}
}
})
运行结果：(冒泡机制限制性当前的事件再往外冒)
这是触发了 btn 按钮的点击事件
事件修饰符.html:29 这是触发了inner div的点击事件
阻止冒泡 .stop
如果想要阻止冒泡则在@click上加.stop：
<div id="app">
<div class="innder" @click="divhandler">
<button type="button" @click.stop="btnhandler">戳他</button>
</div>
</div>
执行结果(阻止了事件向外冒泡)：
这是触发了 btn 按钮的点击事件
阻止默认行为.prevent
<div id="app-2">
<a href="www.baidu.com" @click="linkClick">点我到百度</a>
</div>
如上点击会跳转到百度，如果想阻止a标签的默认跳转事件则：
//创建vue实例得到ViewModel
var vm = new Vue({
el:'#app-2',
data:{
},
methods:{
linkClick:function(){
alert("弹出");
}
}
})
capture
.capture机制即捕获机制，与冒泡机制相反，事件从往里执行
self
.self机制只触发本身的事件，既不事件冒泡也不捕获，只会阻止自己身上冒泡行为的触发而不会影响其他元素的事件
once
使用.once，事件只触发一次
v-model指令：
v-bind只能实现数据的单项绑定，从M自动绑定到V，无法实现数据的双向绑定
v-model它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})注意v-model只能运用在表单元素中
input(radio,text,address,email…) select checkbox textarea
在Vue中使用样式
使用class样式
1.数组方式:class="[‘thin’,‘red’,‘i’]"
<style type="text/css">
.red{
color: red;
}
.thin{
font-weight: 200;
}
.i{
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
<div id="app">
<h1 :class="['thin','red','i']">这是一个h1，测试vue中使用样式</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
},
method:{
}
})
</script>
2.在数组中使用三元表达式：:class="[‘thin’,‘red’,flag?‘active’:’’]"
<div id="app">
<h1 :class="['thin','red',flag?'active':'']">这是一个h1，测试vue中使用样式</h1>
</div>
其中flag是data中定义的变量
3.在数组中使用对象代替三元表达式提高可读性{‘active’:flag}
<h1 :class="['thin','red',{'active':flag}]">这是一个h1，测试vue中使用样式</h1>4.直接使用对象：
:class="{'thin':true,'red':true,'active':true}"
<h1 :class="{'thin':true,'red':true,'active':true}">这是一个h1，测试vue中使用样式</h1>5.间接绑定：
<div id="app">
<h1 :class="classObj">这是一个h1，测试vue中使用样式</h1></div>
var vm = new Vue({
el:'#app',
data:{
classObj:{'thin':true,'red':true,'active':true}
}
})使用内联样式
1.直接在元素上通过 :style 的形式，书写样式对象
也可以间接绑定
<div id="app">
<h1 :style="{color:'red', font-weight:'200' }">这是一个h1，测试vue中使用样式</h1></div>
2.将样式对象，定义到 data 中，并直接引用到 :style 中
<h1 :style="styleObj1">这是一个h1</h1>
var vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'red', 'font-weight': 200 }
}
});3. 在 :style 中通过数组，引用多个 data 上的样式对象
<h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
var vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
}
});v-for循环
1. 迭代普通数组
<div id="app">
<p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6]
},
methods: {}
});2. 迭代对象数组
<div id="app">
<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]
},
methods: {}
});3. 迭代对象
<div id="app">
<!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 -->
<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: '托尼',
gender: '男'
}
},
methods: {}
});4. 迭代数字
<div id="app">
<!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 -->
<!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
</div>
5.v-for循环中key属性的使用
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
<!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
<!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '嬴政' },
{ id: 3, name: '赵高' },
{ id: 4, name: '韩非' },
{ id: 5, name: '荀子' }
]
},
methods: {
add() { // 添加方法
this.list.push({ id: this.id, name: this.name }) # 尾部追加
this.list.unshift({ id: this.id, name: this.name }) # 头部追加
}
}
});
</script>
v-if和v-show的使用
<div id="app">
<!-- <input type="button" value="toggle" @click="toggle"> -->
<input type="button" value="toggle" @click="flag=!flag">
<!-- v-if 的特点：每次都会重新删除或创建元素 -->
<!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->
<!-- v-if 有较高的切换性能消耗 -->
<!-- v-show 有较高的初始渲染消耗 -->
<!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->
<!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
/* toggle() {
this.flag = !this.flag
} */
}
});
</script>
