与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实例中设置的值
本人初学，理解尚浅，有不当之处，望斧正。