Vue基础
起步
- Vue采用的是MVVM的思想
创建Vue对象
- 使用Vue语法时需要先创建一个Vue对象
<div id="root1">
<input type="text" v-model="message">
<!--字符串翻转-->
{{message.split(' ').reverse().join(' ')}}
<p v-bind:class="className">
test
</p>
<div v-html="mess">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<button v-on:click="out">点我</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
let vue = new Vue({
el: '#root1',
data:{
message: '欢迎 来到 召唤师 峡谷',
className: 'blue',
mess: '<h1>我是一级标题</h1>',
infor: '页面加载于 ' + new Date().toLocaleString()
}
methods:{
out: function (event) {
//vue自带的默认事件参数
console.log(this.event);
if(this.className == 'blue'){
this.className = 'red';
}
else{
this.className = 'blue';
}
}
}
}
})
</script>
el: el用来设置vue对象的作用范围,后面跟标签的id,注意此id应为操作的所有标签的顶级标签;
data: 数据集,用来设置vue对象的需要操作的数据,采用键值对的方式;
methods: 方法集,可以直接调用vue对象外部的js函数,用来绑定标签对象的需要操作的函数;
out相当于匿名函数的函数名,用于定义vue对象的具体操作.
标签的绑定
id
<div id='root1'></div>
对应el: '#root1'
v-bind
<p v-bind:class='className'>test</p>
对应data:{className: 'blue'}
v-bind绑定标签的属性和vue对象中data定义的属性值
v-html
<div v-html="mess"></div>
对应data:{mess: '<h1>我是一级标题</h1>'}
v-title
<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
对应data:{infor: '页面加载于 ' + new Date().toLocaleString()}
v-on
<button v-on:click="out">点我</button>
对应out所定义的函数
v-model
<input type="text" v-model="message">
对应
<input type="text" v-model="message">
v-model类似于v-bind,v-model为双向绑定,可以直接修改绑定的vue对象中data的值
类和样式
- 通过v-bind可以通过数组一次为标签绑定多个属性值,也可以通过对象设置不同属性对应的开启条件
注意:数组和对象是以字符串的形式传入的
<style type="text/css">
.red {
width: 100px;
height: 100px;
background-color: red;
}
.blue{
width: 200px;
height: 200px;
background: blue;
}
</style>
<body>
<div id="root1">
<!--
可以绑定多个属性值
-->
<div :class="['red', 'blue', 'green']"></div>
<div :class="{red: isActive, blue:!isActive}"></div>
<!-- 可以通过绑定的style直接设置标签的样式,无需css代码 -->
<div :style="style"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
let vm1 = new Vue({
el: '#root1',
data:{
isActive: false,
style:{
width:'100px',
height:'100px',
<!-- 注意多单词时采用小驼峰结构 -->
backgroundColor:'red'
}
}
});
</script>
methods
- 方法集,具体的使用可见vue对象的创建部分
compute
- 属性值的数据运算集,可以将一些复杂逻辑运算写到其中
<body>
<div id="example">
<input type="text" v-model="message">
<p>{{message}}</p>
<p>{{reversedMessages}}</p>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<p>{{full}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
let vue = new Vue({
el: '#example',
data:{
message: '这是一个测试',
firstName: '蔡',
lastName: '哲永',
fullName: '蔡哲永'
},
/**
* 计算属性： 定义在vue对象的compute属性中，
* 用来完成对vue对象普通属性属性值的计算，
* 该属性可以有效减少网页中关于普通属性的计算过程，
* 同时该操作基于缓存完成，计算效率高于普通函数（methods中定义的函数）调用。
*
*/
computed:{
reversedMessages: function () {
return this.message.split('').reverse().join('');
},
full:function () {
return this.firstName+''+this.lastName
}
}
})
</script>
watch
- 侦听器,用以响应数据的动态变化,可以替换掉上面的compute中的名字操作部分
/**
* 侦听属性： 通过watch设置需要监听的属性名，以及对应的回调操作，
* 一旦该属性值发生变化，
* vue自动调用回调函数将被监听的属性新的属性值通过参数传入，
* 进而完成对新数据的运算操作。
*/
watch:{
firstName: function (val) {
this.fullName = val + this.lastName;
},
lastName: function (val) {
this.fullName = this.firstName + val;
}
}
组件基础
- 可以自定义组件,类似于定义自己的HTML标签
component
<body>
<div id="root">
<click-button></click-button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('click-button', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">这是第{{ count }} 次点击</button>'
});
new Vue({
el: '#root'
})
</script>
- body中的click-button标签即为自定义的组件,可以直接类似于HTML标签一样的创建
- Vue.component(组件名,object),可以创建多个Vue.component()
注意: 在Vue.component中可以定义methods,computed,watch
object:
data的值必需为函数类型,不同于new Vue中的data(对象类型)
template为原生的HTML标签的设置,属性值从data中获取
- new Vue({...}),创建完自定义组件后还需要新建Vue对象并绑定对应的标签
注意是在创建完自定义组件之后创建Vue对象进行绑定
issues
- 在js文件中使用vue出现Vue未找到的问题：
查看Vue的引用是否在自定义的js文件之前，不是则调至自定义js文件的前面
