Vue入门[1]

秋秋哎
317 阅读2分钟

.......jfif

面试题(Vue的优缺点)

1. 优势:

  1. vue两大特点：响应式编程、组件化。
  2. vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。
  3. vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

2.缺点:

  1. Vue 不缺入门教程，可是很缺乏高阶教程与文档。同样的还有书籍。
  2. VUE不支持IE8
  3. 生态环境差不如angular和react
  4. 社区不大

一.Vue

1.初体验

html代码

 <div id="app">
       <h3>{{msg}}</h3>
 </div>

script内容

<script src="./vue.js"></script>
<script>
    // 实例化 vue 方法
    //{{}} -胡子语法
    new Vue({
        el:'#app',    //决定数据挂载在那个元素下
        data:{
            msg:"Hello World !!!" //该属性中通常会存储一些数据
        }
    })
</script>

Snipaste_2021-10-10_21-19-58.jpg

2.对象的数据渲染

html

<div id="app">
    <div>{{student.name}}今年{{student.age}}岁,性别为{{student.sex}}</div>
</div>

script

<script src="./vue.js"></script>  //引入本地vue
<script>
new Vue({
    el: "#app",
    data: {
        student:{   //对象数据
            name:'七七', 
            age:18,
            sex:'女'
        }
    }
})
</script>

3.实现双向数据绑定

输入框输入数据，会显示到 span 元素上，分别通过 js 和 vue 实现

JS方法

html

<div id="app">
        <input type="text" id="ipt">
        <span id="con"></span>
</div>

script

<script>
    var obj = {}; //定义一个空数组
    Object.defineProperty(obj, 'test', {  //定义一个访问器属性
        set: (newVal) => {    //set方法内部的this指向obj
            document.getElementById('ipt').value = newVal;
            document.getElementById('con').innerHTML = newVal;
        }
    });
    document.addEventListener('keyup', (e) => {
        obj.test = e.target.value;
    })
</script>

Vue方法

html

<div id="app">
    <input type="text" v-model="msg">
    <h2>{{msg}}</h2>
</div>

script

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: '你好,世界!!'
        }
    })
</script>

带面试题

简易实现双向绑定 html

<div id="app">
    <input id="ipt" type="text" value="" oninput="iptChange(this.value)">
    <h2 id="title"></h2>
</div>

script

<script>
    //获取元素
    var ipt = document.getElementById('ipt')
    var tit = document.getElementById('title')

    // 声明data对象
    var data = {}

    //给对象动态添加数据 define-定义 Property-属性
    Object.defineProperty(data,'msg',{ //Object.defineProperty(对象的名称,属性的名称, 配置项)
        get:function(){ //get 代表定义 msg 是要给他赋值的数据
            return ""
        },
        set:function(newValue){ //set 代表拿到最新的值时,要去做什么事情
            tit.innerHTML = newValue,
            ipt.value = newValue
        }
    })
    function iptChange(value){
        data.msg = value   //修改数据源(data.msg),会自动触发set方法
    }
</script>

数据双向绑定的原理(重点)

  • Vue双向数据绑定是通过 数据劫持 和 发布订阅者模式 的方式来实现的。
  • 其核心是 Object.defineProperty() 方法：Object.defineProperty(对象的名称,属性的名称, 配置项)

Vue的 MVVM

mvvm.png

  1. view 层: 主要作用是给用户展示各种信息；
  2. Model 层: 数据可能是自定义的数据，或者是请求下来的数据;
  3. ViewModel 层: 是View层和Model层沟通的桥梁,一方面它实现了数据绑定（Data Binding），将Model的改变实时反应到View中；另一方面它实现了DOM监听，当DOM发生改变可以对应改变数据（Data）

二 模板语法

1.v-pre

让胡子语法失效,显示{{}}里原本的内容

<body>
<div id="app">
    <p>当你输入<span v-pre>{{msg}}</span>的时候,你可以看到{{msg}}</p>
</div>
</body>
</html>
<script src="./vue.js"></script>  //本地vue引入
<script>
new Vue({
    el: "#app",
    data: {
        msg:'你好 世界'
    }
})
</script>

Snipaste_2021-10-12_11-22-14.jpg

2.v-html 和 v-text

v-html 不仅可以渲染数据,还可以解析标签 v-text 和 {{}} 渲染数据,不解析标签

<div id="app">
    <ul>
        <li>{{msg}}</li>
        <li v-html="msg"></li>
        <li v-text="msg"></li>
        <div>----------------</div>
        <li>{{content}}</li>
        <li v-html="content"></li>
        <li v-text="content"></li>
    </ul>
</div>
</body>
</html>
<script src="./vue.js"></script> //本地vue引入
<script>
new Vue({
    el: "#app",
    data: {
        msg:"你好世界",
        content:`<strong>hello world</strong>`
    }
})
</script>

Snipaste_2021-10-12_11-24-29.jpg

3. v-cloak

在数据渲染出来之前,将标签隐藏掉

<body>
<div id="app">
    <ul>
        <li>{{msg}}</li>
        <li v-cloak>{{msg2}}</li>
    </ul>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
    el: "#app",
    data: {
        msg:'你好世界',
        msg2:'你好世界!!!'
    }
})
</script>

4.v-show 和 v-if

4.1.区别

  • v-show 是的显示隐藏控制的是css 的 display属性

  • v-if 的显示隐藏是通过创建和销毁dom元素实现的

当你需要频繁切换的话,建议使用 v-show , 一次性渲染 则两个都可以

<body>
    <div id="app">
        <div class="box" v-show="flag">盒子1</div>
        <div class="box" v-if="flag2">盒子2</div>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            flag: true, //显示
            flag2:false //隐藏
        }
    })
</script>

4.2 v-if 条件判断

<body>
<div id="app">
    <ul>
        <li v-if="score>=90">优秀</li>
        <li v-else-if="score>=60">及格</li>
        <li v-else>不及格</li>
    </ul>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        score:95
    }
})
</script>

5.v-on

为元素绑定事件 ,

<div id="app" >
    <!-- <button v-on:click="btnClick">按钮</button> -->
    <!-- 简写 -->
    <button @click="btnClick">按钮</button> 
    <div class="box" v-show="flag">盒子</div>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
    el: "#app",
    // data是专门存放数据的地方
    data: {
        flag:true
    },
    // methods 是专门用来存放方法(函数)的地方
    methods:{
        btnClick(){
            console.log(this);
            // 控制盒子的显示隐藏,本质上是控制flag的true 和false
            this.flag = !this.flag;
        }
    }
})

</script>

gjf.gif

avatar
文章
阅读
粉丝