目录
插值表达式{{}}、v-cloak、v-text、v-html、v-bind、v-on
基础
起步
一定一定要引入vue.js：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
//当我们导包的时候，浏览器的内存中，就多了一个Vue构造函数
var vm = new Vue({ //每次都需要new Vue
el: '#app',
data: { //data属性中存放的是el中要用到的数据
message: 'Hello Vue.js!' //不需要手动操作dom元素
}
})
</script>
插值表达式{{}}、v-cloak、v-text、v-html、v-bind、v-on
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<!-- 使用v-cloak 能够解决插值表达式闪烁问题-->
<p v-cloak>-----{{ message }}--+++</p>
<h4 v-text="message">=-=-=-=</h4>
<!--
区别：1.v-text会覆盖元素中原本的内容，插值表达式只会替换自己的占位符，不会把整个元素内容清空。
2.v-text不会有闪烁问题，插值表达式会有闪烁问题
3.v-html会解析html标签
-->
<div>{{ message2 }}</div>
<div v-text="message2"></div>
<div v-html="message2"></div>
<!--v-bind: 是vue定义提供的用于绑定属性的指令 -->
<!--v-bind:可以简写为: -->
<!--v-bind:中可以写合法的js表达式 -->
<input type="button" value="按钮" v-bind:title="mytitle + '123'" />
<!-- vue中提供了v-on:事件绑定机制 ，注意，v-on里面也是变量，不能直接alert等等-->
<!-- vue中提供了v-on:事件绑定机制 ，v-on可以缩写为@，方法不需要传参可以不写括号-->
<input type="button" value="按钮2" :title="mytitle + '123'" v-on:click="show" />
<input type="button" value="按钮3" :title="mytitle + '123'" @mouseleave="show()" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
message2: '<h1>我是H1</h1>',
mytitle: '这是自定义title'
},
methods: { //这个metho属性中定义了当前vue实例中所有的方法
show: function() {
alert('hello');
}
}
})
</script>
学了这么多了，写一个跑马灯效果巩固一下吧
<body>
<div id="app">
<!--<input type="button" value="浪起来" @click="lang"/>-->
<input type="button" value="浪起来2" @click="lang2" />
<input type="button" value="停止" @click="stop" />
<h4>{{ msg }}</h4>
</div>
</body>
<script>
//this.数据属性名 或this.方法名，来获取当前实例的属性和方法
//vue会监听data的改变,如果data改变,会立即应用到view中去（好处：只关心数据，不需要关心如何渲染到页面）
var vm = new Vue({
el: "#app",
data: {
msg: "猥琐发育，别浪~~",
intervalId: null //定时器的id
},
methods: {
lang: function() {
var _this = this;
//this指向问题
if(this.intervalId != null) return;
this.intervalId = setInterval(function() {
var start = _this.msg.substring(0, 1);
var end = _this.msg.substring(1);
_this.msg = end + start;
}, 200)
},
lang2() { //es6语法
//箭头函数，解决this指向问题
//定时器只能开一次，做判断
if(this.intervalId != null) return;
this.intervalId = setInterval(() => {
var start = this.msg.substring(0, 1);
var end = this.msg.substring(1);
this.msg = end + start;
}, 200)
},
stop() { //停止定时器
clearInterval(this.intervalId);
this.intervalId = null;
}
}
})
</script>
事件修饰符（打开浏览器f12调试哦）
<style>
.inner {
height: 50px;
background-color: chartreuse;
}
.out {
padding: 10px;
background-color: red;
}
</style>
<body>
<div id="app">
<!-- 这里点击按钮，会先触发按钮的事件，再触发div的点击事件，原因：冒泡 -->
<div class="inner" @click="divclk">
<input type="button" @click="btnclk" value="戳我" />
<!-- .stop来阻止冒泡，只触发按钮的点击事件 -->
<input type="button" @click.stop="btnclk" value="戳我" />
<br/>
<!-- prevent阻止默认行为，这里阻止了a标签跳转到百度（也可以用于阻止submit） -->
<a href="http://www.baidu.com" @click.prevent="aclk">先去百度</a>
</div>
<div class="inner" @click.capture="divclk">
<!-- capture捕获机制，先触发外层div的点击，再触发按钮的点击事件 -->
<!-- 这里需要在上层的div点击事件加capture<div class="inner" @click="divclk">-->
<input type="button" @click="btnclk" value="戳我capture" />
</div>
<!-- self只有点击当前元素时才会触发-->
<div class="inner" @click.self="divclk">
<input type="button" @click="btnclk" value="戳我self" />
</div>
<!-- prevent阻止默认行为，这里阻止了a标签跳转到百度（也可以用于阻止submit） -->
<!-- once只会触发一次，默认行为也会只执行一次 -->
<!--可以串联使用 -->
<a href="http://www.baidu.com" @click.prevent.once="aclk">先去百度</a>
<!--演示.stop和.self区别-->
<!--
.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为。
-->
<div class="out" @click="otdivclk">
<div class="inner" @click="divclk">
<input type="button" @click.stop="btnclk" value="戳我" />
</div>
</div>
<div class="out" @click="otdivclk">
<div class="inner" @click.self="divclk">
<input type="button" @click="btnclk" value="戳我" />
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
btnclk() {
console.log("这是按钮的点击");
},
divclk() {
console.log("这是div点击");
},
aclk() {
console.log("a点击了");
},
otdivclk() {
console.log("外层div点击");
}
}
})
</script>
v-model实操
<body>
<div id="app">
<h4>{{ msg }}</h4>
<!--v-bind只能实现数据的单向绑定-->
<input type="text" :value="msg" />
<!--v-model能实现数据的双向绑定，只能用于表单元素input,select,checkbox,textarea-->
<input type="text" v-model="msg" />
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "大家都是好学生"
},
methods: {
}
})
</script>
<body>
<div id="app">
<input type="text" v-model="n1" />
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2" />
<input type="button" value="=" @click="calc" />
<input type="text" v-model="result" />
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc() {
/*switch (this.opt){
case '+':
this.result = parseInt(this.n1) +parseInt(this.n2);
break;
case '-':
this.result = parseInt(this.n1) -parseInt(this.n2);
break;
case '*':
this.result = parseInt(this.n1) *parseInt(this.n2);
break;
case '/':
this.result = parseInt(this.n1) /parseInt(this.n2);
break;
default:
break;
}*/
//eval解析字符串 投机取巧的方式，正式开发尽量少用
var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
this.result = eval(codeStr);
}
}
})
</script>
样式
外联样式
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
<body>
<div id="app">
<h1 class="red thin">这是一个h1</h1>
<!--第一种方式，直接传递一个数组，注意这里需要用v-bind做绑定。如果没有该变量，用引号可以直接获取class-->
<h1 :class="['red', 'italic']">数组</h1>
<!--第二种方式：三元表达式-->
<h1 :class="['red', 'italic', flag ? 'active':'']">三元表达式</h1>
<!--第三种方式：数组中使用对象-->
<h1 :class="['red', 'italic', {'active':flag}]">对象</h1>
<!--第四种方式：直接使用对象，为class使用v-bind使用对象时候，对象属性是类名（属性可带引号可不带）；
属性值为标识符
-->
<h1 :class="{'red':flag, italic:flag,active:false}">直接使用对象</h1>
<h1 :class="classObj">直接使用对象</h1>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true,
classObj: {
'red': false,
italic: true,
active: false
}
},
methods: {
}
})
</script>
内联样式
<body>
<div id="app">
<!--对象就是无序键值对的集合-->
<h1 :style="{color:'red', 'font-weight':200}">这是对象</h1>
<h1 :style="styleObj1">这是对象</h1>
<!--对象数组-->
<h1 :style="[styleObj1, styleObj2]">这是对象数组</h1>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true,
styleObj1: {
color: 'red',
'font-weight': 200
},
styleObj2: {
'font-style': 'italic'
}
},
methods: {
}
})
</script>
v-if、v-show
<body>
<div id="app">
<input type="button" value="点击" @click="toggle" />
<input type="button" value="或者直接这样点击" @click="flag = !flag" />
<!--
v-if是每次都会重新删除或创建元素；
v-show是每次不会重新删除创建元素，只是切换display:none样式
v-if有较高的切换性能消耗，v-show有较高的初始渲染消耗
-->
<h3 v-if="flag">v-if</h3>
<h3 v-show="flag">v-show</h3>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {
toggle() {
this.flag = !this.flag;
}
}
})
</script>
v-for
<body>
<div id="app">
<!--循环数字数组-->
<span v-for="item in list">{{ item }}</span>
<br />
<span v-for="(item, i) in list">值：{{ item }}索引： {{ i }}</span>
<hr />
<!--循环对象数组,i为索引-->
<p v-for="user in listObj">id:{{ user.id }}名字：{{ user.name }}</p>
<!--<p v-for="(user, i) in listObj">id:{{ user.id }}名字：{{ user.name }}</p>-->
<hr />
<!--循环对象-->
<!--注意，在遍历对象身上的键值对时，除了有val，key，还有索引i-->
<p v-for="(val, key, i) in user">{{ val }}: {{ key }}: {{ i }}</p>
<hr />
<!--迭代数字,从1开始，同样也有索引-->
<p v-for="(count, i) in 5">{{ count }} {{ i }}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
list:[1, 2, 3, 4, 5, 6],
listObj:[
{ id :1, name:'z1'},
{ id :2, name:'z2'},
{ id :3, name:'z3'},
{ id :4, name:'z4'}
],
user:{
id:1,
name:'z3',
gender:'男'
}
},
methods:{
}
})
</script>
<body>
<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绑定
在组件中使用v-for，或者在一些特殊情况中，必须使用key
-->
<p v-for="item in list" :key="item.id">
<input type="checkbox" value="item.id" /> ------{{ item.id }}----{{ item.name }}
</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
list: [{
id: 1,
name: 'z1'
},
{
id: 2,
name: 'z2'
},
{
id: 3,
name: 'z3'
},
{
id: 4,
name: 'z4'
}
]
},
methods: {
add() {
this.list.unshift({
id: this.id,
name: this.name
}); //前插入
}
}
})
</script>