与Vue的第一次相识
->Vue.js是什么?
是一套用于构建用户界面的渐进式框架
->引入vue.js文件
在head标签中添加vue.js文件路径
如:
<head>
<meta charset="utf-8">
<title></title>
<script src='./vue.js'></script>
</head>
->创建vue实例
在body标签下添加script标签,在添加的script标签中创建vue实例
<body>
<!-- Model层 -->
<script>
<!--创建要给Vue实例 -->
var vm = new Vue({
})
</script>
</body>
->MVVM模式
M:model层-通过VM与View建立联系进行操作
V:View层-即我们的DOM展现出的内容
VM:Vue给定的文件
- >在代码中理解MVVM模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vueMVVM</title>
<!-- ViewModel层 -->
<script src='./vue.js'></script>
</head>
<body>
<!-- View层 -->
<div id="root" >
</div>
<!-- Model层 -->
<script>
<!--创建一个Vue实例 -->
var vm = new Vue({
// 将vue实例与id是“root”的元素绑定
el:"#root"
})
</script>
</body>
</html>
与Vue的第二次见面
通过这个实例,揭开vue的面纱,看不懂没关系,继续往下看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vueMVVM</title>
<!-- ViewModel层 -->
<script src='./vue.js'></script>
</head>
<body>
<!-- View层 -->
<div id="root" >
<!-- 差值表达式 -->
{{content}}
<!-- 双相绑定:通过v-model绑定数据“todoValue” -->
<input type="text" v-model="todoValue"></input>
<!-- 绑定事件:为button元素绑定点击事件“handlBtnClick” -->
<button v-on:click="handlBtnClick">点击</button>
<button @click="handlBtnClick">我也是点击</button>
</div>
<!-- Model层 -->
<script>
<!--创建一个Vue实例 -->
var vm = new Vue({
// el表示实例的作用范围,即让这个vue实例接管id是"root"元素的内容
el:"#root",
// 定义数据,在dom中可以用“{{数据名}}”去调用定义的数据
data:{
// 定义一个数据“content”,数据内容是“Hello Vue”
content:'Hello Vue',
todoValue:'Hello World'
},
// 定义绑定元素中的事件
methods:{
//定义事件和事件内容
handlBtnClick:function(){
//执行的事件内容
this.content=this.todoValue
}
}
})
</script>
</body>
</html>
首先,与Model聊聊天
->vue实例中的el属性:绑定vue对象的作用元素
应用:在model层,为创建的vue实例绑定id="root"的元素
<!-- Model层 -->
<script>
<!--创建一个Vue实例 -->
var vm = new Vue({
// el表示实例的作用范围,即让这个vue实例接管id是"root"元素的内容
el:"#root"
})
</script>
->vue实例中的data属性:定义vue对象的数据属性
应用:定义两个Vue对象的属性“content”和“todoValue”,并赋值
<!-- Model层 -->
<script>
<!--创建一个Vue实例 -->
var vm = new Vue({
// el表示实例的作用范围,即让这个vue实例接管id是"root"元素的内容
el:"#root",
// 定义数据,在dom中可以用“{{数据名}}”去调用定义的数据
data:{
// 定义一个数据“content”,数据内容是“Hello Vue”
content:'Hello Vue',
todoValue:'Hello World'
}
</script>
->vue实例中的methods属性:定义vue对象的事件
应用:为实例添加methods属性,定义事件
<!-- Model层 -->
<script>
<!--创建一个Vue实例 -->
var vm = new Vue({
// el表示实例的作用范围,即让这个vue实例接管id是"root"元素的内容
el:"#root",
// 定义数据,在dom中可以用“{{数据名}}”去调用定义的数据
data:{
// 定义一个数据“content”,数据内容是“Hello Vue”
content:'Hello Vue',
todoValue:'Hello World'
},
// 定义绑定元素中的事件
methods:{
//定义事件和事件内容
handlBtnClick:function(){
//执行的事件内容
this.content=this.todoValue
}
}
})
</script>
休息一会,与View层继续聊
如何给vue实例定义事件呢?通过v-on属性就可以
->v-on:为元素绑定事件,用于事件的监听绑定,当监听到指定事件后执行该事件的内容
应用:为button元素绑定click事件,
v-on的缩写为“@”,所以v-on:click="handlBtnClick"和@click="handlBtnClick"效果相同
应用:
<div id="root" >
<!-- 为button元素绑定点击事件“handlBtnClick” -->
<button v-on:click="handlBtnClick">点击</button>
<button @click="handlBtnClick">我也是点击</button>
</div>
<!-- Model层 -->
<script>
<!--创建一个Vue实例 -->
var vm = new Vue({
// el表示实例的作用范围,即让这个vue实例接管id是"root"元素的内容
el:"#root",
// 定义绑定元素中的事件
methods:{
//定义事件和事件内容
handlBtnClick:function(el){
//事件内容
}
}
})
</script>
->数据绑定的三种方式
->插值表达式
格式:{{vue实例的data中定义的属性名称}}
应用:将vue实例中定义好的“content”的值插入到dom元素中
<div id="root" >
<!-- 通过双花括号实现插值表达式的应用 -->
{{content}}
</div>
->v-model:实现双相绑定
应用:在view层为元素绑定vue实例中的属性“todoValue”,在vue实例中“todoValue"值为 ‘Hello World’,所以文本框会显示Hello World
实现了model层到view层的数据绑定,即view层可以获取model层的数据。
为点击按钮添加事件"handlBtnClick”,当点击按钮时,获取文本框内容,将其使用差值表达式显示在前面“Hello Vue”的位置
下面这个效果更明显,获取文本框中的值,将其通过差值表达式,显示在view中
<!-- View层 -->
<div id="root" >
<!-- 双相绑定:通过v-model绑定属性“todoValue” -->
<input type="text" v-model="todoValue"></input>
<!-- 为button元素绑定点击事件“handlBtnClick” -->
<button v-on:click="handlBtnClick">点击</button>
<button @click="handlBtnClick">我也是点击</button>
</div>
<!-- Model层 -->
<script>
<!--创建一个Vue实例 -->
var vm = new Vue({
// el表示实例的作用范围,即让这个vue实例接管id是"root"元素的内容
el:"#root",
// 定义数据,在dom中可以用“{{数据名}}”去调用定义的数据
data:{
// 定义一个数据“content”,数据内容是“Hello Vue”
content:'Hello Vue',
todoValue:'Hello World',
},
// 定义绑定元素中的事件
methods:{
//定义事件和事件内容
handlBtnClick:function(el){
//执行的事件内容
this.content=this.todoValue
}
}
})
</script>
</body>
->v-bind:实现元素绑定
应用:修改dom元素text的title属性值为自定义—“文本框标题”
<body>
<!-- View层 -->
<div id="root" >
<!-- 通过双花括号实现数据content的显示 -->
{{content}}
<input type="text" v-model="todoValue" v-bind:title="txttitle" ></input>
</div>
<!-- Model层 -->
<script>
<!--创建一个Vue实例 -->
var vm = new Vue({
// el表示实例的作用范围,即让这个vue实例接管id是"root"元素的内容
el:"#root",
data:{
//自定义指定text的标题
txttitle:"文本框标题"
},
})
</script>
</body>
效果:text文本框的title属性值为vue实例中设置的值
本人初学,理解尚浅,有不当之处,望斧正。