初识vue框架的第一天

wdaynsl

于 2020-03-18 23:25:14 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/wdaynsl/article/details/104955914

版权

初识VUE框架第一天

Vue是什么？

是一个前端的JS框架
渐进式框架

特点：
易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）

Vue能做什么？
管理数据，简化操作
摒弃掉 DOM 操作

vue的mv*模式
mvc:
m:model 数据模型层 dao层
v:view 视图层
c:controller 控制器 service
controller的作用：就是将m层的数据在view层进行显示
MVP：
m：model
v: view
p: Presenter
mvvm:
m：model
v: view
vm: viewmodel
mvc和mvp都有其缺点，所以市场上现在使用的就是mvvm模式（双向数据绑定）,现在市场上大部分使用的就是vue2x

关于mvvm经常会被问到的面试题：
model层数据变化的时候，为什么vm就可以知道数据发生变化了呀？其实就是问：vue的双向数据绑定的原理
1，vue在创建vm的时候，会将数据配置到实例中，然后通过Object.defineProperty方法，为数据动态的添加getter与setter方法。
2，当获取数据的时候，会触发对应的getter方法，当设置数据的时候，触发对应的setter方法。
3，然后当setter方法触发完成的时候，内部会进一步触发watcher,当数据改变了，视图则更新操作完毕。

Vue的语法？
Vue不支持IE8，因为使用了ES5的很多特性
1，如何创建一个vue实例？
注意：实例data里面的数据类型可以是任意类型
undefined / null 在{{}}里面是没有办法渲染出来的

  <body>   
  div id="app">
        {{msg}}
    </div>
    <!--引入了vue.js库-->
    <script src="./base/vue.js"></script>
    <script>
        //创建一个Vue的实例
        //声明一条数据，然后用特殊的模板语法将其渲染到界面中 ===> 声明式渲染
        var vm = new Vue({
            el:"#app", //el=>挂载点
            data:{     //data=>数据
                msg:"hello world"
            }
        })
    </script>
</body>

Vue基础
一.模板语法

(1) 插值
a.文本 {{ }}
b.纯HTML
v-html慎用，防止XSS,CSRF（
(1) 前端过滤（前端采用正则将容易注入的字符<等过滤掉）
(2) 后台转义( < > 换成 &lt &gt ) ）
c.表达式

(2) 指令
是带有 v- 前缀的特殊属性
v-on:click 绑定事件
v-for 遍历
在vue中可以通过v-for来循环数据的通知循环dom，语法是item in/of items，接收第二个参数是索引 (item,index) of items,
还可以遍历对象，第一个参数是value，第二个是key，第三个依然是索引
下面两个简单的例子：

<div id="app">  
        <p>num: {{num}}</p>
        <p><button @click="num++">点击num</button></p>
        <p><button @dblclick="num++">双击num</button></p>
        <ul @click.self="clickUl">
            <li @click="clickLi">1111111</li>
        </ul>
        <form action="#" @submit.prevent="submits">
            <input type="text" name="username">
            <input type="submit">
        </form>
        <button @click.once="abc">abc</button>
        <input @keyup.enter="up" type="text" >
    </div>
    <script src="./base/vue.min.js"></script>
    <script>
        //v-on可以用来绑定点击事件
        //v-on:click ====> @click
        //修饰符是由点开头的指令后缀来表示的
        //.stop      可以阻止事件的冒泡
        //.prevent   可以取消事件的默认行为
        //.once      只会触发一次
        //.self      只会自身触发
        new Vue({
            el:"#app",
            data:{
                num:0
            },
            methods:{
                up(e){
                    // if(e.keyCode === 13){
                        console.log(e.target.value)
                        e.target.value = ""
                    // }
                },
                abc(){
                    console.log("abc...")
                },
                submits(e){
                    console.log("submits....")
                    // e.preventDefault() //w3c取消事件的默认行为
                },
                clickUl(){
                    alert("这个ul被点击了哦....")
                },
                clickLi(e){
                    alert("这个li被点击了哦...")
                    // e.stopPropagation()   w3c里面提供的    e.cancelBubble = true/ie9
                }
            }
        })

<body>
    <div id="app">    
        <ul>
            <li v-for="(item,index) of arr">{{index+1}} / {{item}}</li>
        </ul>
    </div>
   
    <script src="./base/vue.js"></script>
    <script>
        //在上面写的v-开头的称之为vue的指令（directive） 指令的作用，就是用来操作dom
        new Vue({
            el:"#app",
            data:{
                arr:["苹果","香蕉","橘子"]
            }
        })
    </script>
</body>

数组更新检测
vue可以被侦听到的数组的变异方法：
push() 从数组后面的添加元素返回数组的长度
pop() 从后面删除一个元素返回删除的元素
shift() 从前面删除一个元素返回删除的元素
unshift() 从数组的前面追加元素返回数组的长度
splice() 数组的剪贴、删除、插入
sort() 数组的排序
reverse() 数组的反转

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
     1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
      1-1.Vue.set(vm.items, indexOfItem, newValue)
       Vue.set(vm.arr, 2, 30) //如果在实例中可以通过 this.$set(vm.arr, 2, 30)
      1-2 vm.items.splice(indexOfItem, 1, newValue)
     2.当你修改数组的长度时，例如：vm.items.length = newLength
            vm.items.splice(newLength)