day1

2018-11-02 本文已影响0人 A_9c74

MVVM模式：
- model 负责数据存储
- View 负责页面展示
- View model：负责业务逻辑处理（比如ajax请求等），对数据进行加工后交给视图展示

vue中代码对应的MVVM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<!--vue实例所控制的元素区域就是 V view层-->
<div id="app">
    <p>{{msg}}</p>
</div>
</body>
<script>
    //我们这个new出来的这个vue对象就是我们vm 调度者 view-model层
    var vue=new Vue({//创建一个vue实例
        el:'#app',//表示,当前我们new的这个VUE实例，要控制页面上的那个区域
        //这里的data就是mvvm中的m model层 专门用来保存 每个页面的数据的
        data:{//data中要存放的是el中要用到的数据
            msg:'vue'//通过vue提供的指令 我们可以很方便的就能吧数据渲染到页面上，程序员不再手动操作dom元素了【vue之类的框架不再提倡操作dom元素】
        }
    })
</script>
</html>

差值表达式：只会占用差值表达式所占用的空间，不会覆盖整个标签
v-cloak:差值表达式闪烁，通过添加v-cloak属性设置display none 来消除闪烁
v-text：会覆盖整个标签不会解析html标签，没有闪烁
v-html：会覆盖整个标签可以解析html标签，没有闪烁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{html}}</h1>
    <h1>{{msg}}</h1>
    <h1 v-html="msg"></h1>
    <h1 v-text="msg"></h1>
    <h1 v-html="html"></h1>
</div>
</body>
<script>
    var vue=new Vue({
        el:"#app",
        data:{
            msg:"vue",
            html:"<span>new vue</span>"
        }
    })
</script>
</html>

image.png

v-bind:绑定属性值

 <input type="button" v-bind:title="msg2 + '123'">

v-bind中可以写合法的js表达式
通过将后面的代码转换为js代码表达式来实现绑定
可以简写为英文冒号 ':'
v-on ：绑定事件
与v-bind一样都会把后面的值当做js表达式来解析；
所以

<input value="button" type="button" v-on:click="alert('hello');">

这种写法是错误的
要通过methods来定义一个方法

 var vue=new Vue({
        el:"#app",
        data:{
            msg:"vue",
            html:"<span>new vue</span>",
            msg2:"mytitle"
        },
        methods:{//methods中定义了当前vue实例所有可用的方法
            show:function(){
                alert('hello');
            }
        }
    })

html代码:

<input type="button" v-on:click="show">;

简单的demo 跑马灯效果：

事件修饰符
self：只点击自身才会出发事件
once：只出发一次事件
stop：停止事件冒泡
prevent：阻止事件默认行为
capture：通过给父级元素添加capture 会使得此父级以下的所有子级以事件捕获机制运行

数据的双向绑定

image.png

window.vm 可以找到 vue实例
里面用一个data 就是我们的msg的值

image.png

通过在控制台里我们实现了数据的单向绑定，从model层到view层的绑定

尝试用 v-bind 进行绑定可以发现 v-bind只能实现从model 到 view的绑定并不能实现我们的数据的双向绑定

v-model指令

通过 v-model指令可以实现数据表单元素和 model层中数据的双向绑定
v-model 指令只能运用在表单元素中
input(radio text,address,email) select checkbox textarea 等可以使用v-model指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
    <h4>{{msg}}</h4>
    <!--v-bind 只能实现数据的单向绑定 从model到view 并不能实现数据的双向绑定 -->
    <!--<input type="text" v-bind:value="msg">-->
    <input type="text" v-model="msg">
</div>
</body>
<script>
    var vm =new Vue({
        el:'#app',
        data:{
            msg:'vue demo'
        }
    })
</script>
</html>

通过属性绑定为元素设置class类名称
总共4种方式，核心是利用v-bind指令
第一种直接传递数组
第二种在数组中使用三元表达式
第三种使用对象来代替三元表达式
第四种直接传对象
实验代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .red{
        color:red;
    }
    .thin{
        font-weight: 200;
    }
    .italic{
        font-style: italic;
    }
    .active{
        letter-spacing: 0.5em;
    }
</style>
<script src="js/vue.js"></script>
<body>
<div id="app">
   <!-- <h1 class="red thin">这是一个很大的H1</h1>-->
    <!--第一种使用方式 直接传递数组 使用v-bind 做数据绑定-->
    <!--<h1 :class="['thin','red','italic']">这是一个很大的H1</h1>-->
    <!--在数组中使用三元表达式-->
   <!-- <h1 :class="['thin','red','italic',flag?'active':'']">这是一个很大的H1</h1>-->
    <!--在数组中使用对象来代替三元表达式，提高可读性-->
   <!-- <h1 :class="['thin','red','italic',{'active':flag}]">这是一个很大的H1</h1>-->
    <!--在为class使用v-bind绑定对象的时候，对象的属性是类名 由于对象的属性可带引号也可不带
    属性的值为一个标识符-->
    <!--<h1 :class="{ red:true ,italic:true,thin:true,active:false}">这是一个很大的H1</h1>-->
    <h1 :class="classobj">这是一个很大的H1</h1>
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            flag:true,
            classobj:{ red:true ,italic:true,thin:true,active:false}
        }
    })
</script>
</html>

为元素设置内联样式
三种方法：
第一种直接传对象
第二种将对象存入data里再进行传入
第三种传入一个数组
实验代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
   <!-- 对象就是一个无序键值对的集合-->
    <!--第一种 直接传对象-->
  <!--  <h1 :style="{'color':'red','font-weight':200}">这是一个h1</h1>-->
    <!--第二种将对象存到data里 然后再传入-->
    <!--<h1 :style="styleobj">这是一个h1</h1>-->
    <!--第三种-->
    <h1 :style="[styleobj,styleobj2]">这是一个h1</h1>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            styleobj:{'color':'red','font-weight':200},
            styleobj2:{'font-style':'italic'}
        }
    })
</script>
</html>

v-for 指令
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
四种使用方式
遍历数组
遍历对象数组
遍历对象（在遍历对象的时候有3个值 item key index）
迭代数字
实验代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
    <p v-for="(item,index) in list">{{item}} 索引值：{{index}}</p>
    <p v-for="(user , index) in list2">id:{{user.id}}---名字：{{user.name}}---索引是{{index}}</p>
    <!--在遍历对象的时候 除了有val，key，在第三个位置还有一个索引-->
    <p v-for="(value,key,i) in user">值是：{{value }}---键是：{{key}}---索引是：{{i}}</p>
   <!--v-for迭代数字，in后面放普通数组，对象数组，对象，还可以放数字-->
    <!--如果使用v-for迭代数字的话，count值是从1开始-->
    <p v-for="count in 10">这是第{{count}}次循环</p>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            list:[1,2,3,4,5,6],
            list2:[
                {id:1,name:"zs1"},
                {id:2,name:"zs2"},
                {id:3,name:"zs3"},
                {id:4,name:"zs4"}
            ],
            user:{
                id:"1",
                user:"TONY",
                gender:'男'
            }
        }
    })
</script>
</html>

在 2.2.0版本以后在组件中使用v-for key值是必须使用的
如果我们在页面中动态给一个v-for渲染的标签添加元素
那么就会产生一个问题

image.png

image.png
checkbox对应的标签发生了变化
这时就需要到我们的key 键值
key在使用过程中只能使用v-bind属性绑定的形式，指定key的值
在组件中使用v-for循环中，或者在一些特殊的情况中，如果v-for有问题，必须在使用
v-for的同时，指定唯一的字符串/数字类型：key 值
实现原理戳这里
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
   <div>
       <label for="">
           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循环过程中 只能使用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>
</body>
<script>
    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.unshift({id:this.id,name:this.name})
            }
        }
    })
</script>
</html>

day1

MVVM模式：

尝试用 v-bind 进行绑定可以发现 v-bind只能实现从model 到 view的绑定并不能实现我们的数据的双向绑定

v-model指令

猜你喜欢

热点阅读

day1

MVVM模式：

尝试用 v-bind 进行绑定 可以发现 v-bind只能实现从model 到 view的绑定 并不能实现我们的数据的双向绑定

v-model指令

猜你喜欢

热点阅读

尝试用 v-bind 进行绑定可以发现 v-bind只能实现从model 到 view的绑定并不能实现我们的数据的双向绑定