vue初始

前端菜鸟-001

于 2020-11-27 17:38:20 发布

阅读量95

点赞数

分类专栏：前端学习 vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_46036183/article/details/110238504

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端学习

1 篇文章 0 订阅

订阅专栏

VUE初识

vue介绍

1.官网：https://cn.vuejs.org/

2.api

1.vue特点：

易用，灵活，高效

2.渐进式

根据需求的不同加载不同模块

库和框架的区别：

库：jq …js 功能单一

框架:vue react angular

3.vue核心：

数据驱动

组件化

4.vue安装

a.cdn方式需要引入的开发版本

b.npm install vue

c.直接下载vue.js

一：指令

v-text/v-html v-if,v-show v-if:直接移除元素 v-show:通过display：none老设置元素应用场景：如果频繁切换元素需要用v-show

v-if/v-show v-else-if v-else 注意：v-if v-else 中间不允许有内容

v-bind 绑定属性

  <!-- v-bind简写: -->
  <div :abc='abc'>我是div</div>

v-on 绑定方法

<!-- v-on：的简写方式:@ -->
<button @click='fn'>点击弹出内容</button>

v-on：注意：方法名后面的小括号如果没有参数的情况下可以省略

v-model:

数据的双向绑定只能应用于表单元素

 <div >{{content}}</div>
 <input type="text" v-model='content'>

二、绑定样式

:class 方式绑定:

 <div class="box div3">我是div</div>
 <!-- 通过绑定属性的方式 -->
 <div :class='box'>我是div2</div>
 <!-- 通过三元方式添加样式 -->
 <div :class='[1==2?box:div3]'>我是div3</div>
 <!-- 复合样式-->
 <div :class='box+" div3"'>我是div4</div>

:style 方式绑定:

<div style='width: 100px;height: 100px;background-color: red;'>我是div</div>
<!-- style的行内样式 -->
<div :style='obj'>我是div2222</div>
<div :style='[obj,obj1]'>我是div33333</div>

知识点: :key的作用; 绑定一个唯一值，避免勾选不正确的问题与v-for的固定搭配

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-for='(item,index) in list' :key='item.id'>
            <input type="checkbox">
           {{index+1}}---- {{item.name}}---{{item.age}}
          
        </div>
        <div>
            姓名: <input type="text" v-model='user.name'>
        </div>
        <div>
            年龄: <input type="text" v-model='user.age'>
        </div>
        <div>
            <button @click = 'add'>添加</button>
            <button @click = 'reset'>重置</button>
        </div>
    </div>

</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app', 
        data: {
            user:{
                name:'张三',
                age:20
            },
            list:[
                {id:1,name:'李四',age:15},
                {id:2,name:'王五',age:25},
                {id:3,name:'赵六',age:35},
            ]
        },
        methods: {
            // 重置数据  this 指的就是vue的实例
            reset(){
               this.user={
                   name:'',
                   age:''
               } 
            },
            // 增加
            add(){
                // this.list.push({id:4,name:'王麻子',age:18})
                let obj = {id:4,name:'王麻子',age:18}
                this.list.splice(2,0,obj)
            }
        },
    })
</script>

</html>

面试题

mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

MVVM是model-view-viewmodel的缩写，它是一种基于前端开发的架构模式，其核心是提供对view和viewmodel的双向数据绑定，这使得viewmodel的状态改变可以自动传递给view，在MVVM架构下view和model没有直接的联系，而是通过viewmodel进行交互。

jQuery是一个库，功能较为单一，主要是通过操作dom节点进行属性的改变

MVVM框架不关心DOM的结构，而是关心数据如何存储，通过更新JavaScript对象的状态来实现功能

mvvm适用于处理数据交互，页面实时处理
vue等单页面应用及其优缺点

优点：vue的目标是通过尽可能简单的api实现响应的数据绑定和组合视图的组件，核心是一个响应的数据绑定系统。MVVM，数据驱动，组件化，轻量，简洁，高效，快速，模块友好

缺点：不支持低版本浏览器，最低支持待IE9，不利于SEO（如果支持SEO，建议通过服务端进行渲染组件），第一次加载首页耗时相对较长，不可以使用浏览器的导航按钮需要自行实现前进后退
说出至少4种vue当中的指令和它的用法？

v-text更新元素的文本内容

v-html更新元素的innerHTML

v-bind绑定元素属性

v-on绑定事件

v-model在表单上创建双向数据绑定

v-for多次渲染元素或模块等
v-if 和 v-show 区别

实现方式: v-if是动态的向DOM树内添加或者删除DOM元素，v-show是通过设置DOM元素的display样式属性控制显隐

使用场景: v-if适合条件不太可能改变的情况，v-show适合条件频繁切换的情况。

性能消耗: v-if有更高的切换消耗，v-show有更高的初始渲染消耗。

编译过程: v-if切换有一个局部编译卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件，v-show只是简单的基于CSS切换。

编译条件: v-if是惰性的，如果初始条件为假，则什么也不做，只有在条件第一次变为真时才开始局部编译， v-show是在任何条件下都被编译，然后被缓存，而且DOM元素保留。

前端菜鸟-001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue初始

VUE初识vue介绍1.官网：https://cn.vuejs.org/2.api1.vue特点：易用，灵活，高效2.渐进式根据需求的不同加载不同模块库和框架的区别：库：jq …js 功能单一框架:vue react angular3.vue核心：数据驱动组件化4.vue安装a.cdn方式需要引入的开发版本b.npm install vuec.直接下载vue.js一：指令v-text/v-html v-if,v-show v-if:直接移除元素
复制链接

扫一扫