2020.10.12.叶梦宇

vue

一,什么是vue

vue是第三方开发的,渐进式的,基于MVVM设计模式的纯前端的js框架
第三方:别人写好的,我们直接下好即可
渐进式:可以逐步在项目中引入vue各项功能,同时可以与其他技术混用,但是不推荐(只要不是使用框架,一律使用es5,不能出现es6;我们使用框架的时候就使用es6)
mvvm 设计模式:
1,传统前端三大部分:html/css/JavaScript
问题:html/css功能都太弱了,对于页面中发生的一切变化都需要JavaScript来编写,导致了需要JavaScript编写大量重复增删改查操作
2,现代前端三大部分:(mvvm)
界面(view):指网页中的元素和样式,一般指的是html/css。view是html网页中的一个需要动态加载内容的父元素,比如:"div#app"。html中的视图,也被称为模板template,如果发生template错误,那么就在html中查找就可以了
数据模型(model):集中保存页面中所需要的所有变量和变量值。模型,指程序中
控制器(viewmodel):视图模型/控制,用于替代之前的DOM/jquery操作,封装了重复的增删改查操作,吧模型中的数据和视图中html绑定在一起。vue类型提供的就是一种强大的viewmodel对象,可以9自动同步数据和页面元素,专门负责自动将模型中的变量值自动同步到界面中所需要的位置,实现实时同步
viewmodel核心原理:(响应系统/虚拟DOM树)

纯前端:不需要任何后端技术,就能够独立运行
框架:包含核心功能的半成品代码开发人员只需要根据业务的需求,添加定制自己个性化 的 一部分内容即可

二,对比原生DOM,jQuery,Vue框架

1,原生DOM:使用原生DOM,必须是一步一步来,而且每一步都不能少,步骤上非常繁杂,
问题:jQuery中有多少种查找方法?
查找id的元素,查找class的元素,查找name的元素
2.jQuery:jQuery其实是对DOM的每一步都进行了简化,但是并没有从根本上改变程序流程
3,Vue:
优点:已经包含核心功能,而且已经封装了很多重复的功能,编写时我们就不必要再编写重复的功能,比如:增删改查
再开发中彻底简化了开发步骤

低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。

可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。

缺点:旧浏览器不兼容,开发成员需要彻底改变编程习惯和思维
DOM树重绘问题:一个两个看不出来,弄几百个会卡

三,为什么使用Vue?什么时候使用Vue

1,Vue适用于于以Vue适用于以数据操作为主的项目(web/app),2.我们使用vue框架可以提高项目的开发效率

如何在项目中使用Vue

下载独立的Vue.js文件:打开官网,点击页面中的起步按钮,之后再在页面左侧选择安装,在安装下选择要 下载的版本
最好使用开发版本的,会有警告和提示
在网页中引入Vue,js。

vue的基本用法

问题:new Vue的绑定原理
其实就是创建一个viewModel对象,自动的绑定界面和数据,new Vue 就会自动将data中的初始值,替换到界面中所有的{{变量}}的位置,只要data中的值发生变化,new Vue就会自动将新的变量值,更新到页面中{{变量}}的位置
new Vue中包含了两大子系统(响应系统,虚拟DOM树)
1,响应系统:new vue()刚创建的时候,需要先引入data对象,并自动为data中每个变量添加访问器属性保护起来,所有访问器属性都 直接隶属于new vue 对象。如果想要修改fdata中的变量,可以通过“this.变量名”的方式进行访问。但是,其实都是访问变量的set访问器,而且,new vue()在每个set 访问器中都添加了通知机制,只要修改变量,就会自动调用访问器,只要调用了访问器,就会触发通知。
2,虚拟DOM树:new vue()通过扫描真实的DOM树,形成一个简化版的DOM树模型,它仅包含可能变化的属性,那些固定不变的属性和变量,一点都不包含,因为真实的DOM树太大了,包含了很多无关的属性,不便于查找,所以我们需要使用虚拟DOM树
优点:1,小,遍历极快,而且只修改变化的元素,影响的范围小
2,封装了重复的增上改查操作,极大的减少了代码量
3,效率高,仅修改个人可能受影响

什么是绑定语法

1,绑定语法就是专门为html添加变量,html本身并不支持变量,但是html中的个别内容又需要根据程序中的变量自动变化,当html中的任何一个位置的内容,需要根据程序中语法:{{变量/js 表达式}}
双花括号{{}},也叫大胡子语法,官方语法:mustache,补缺,插值的意思,大胡子语法,用于特定的model数据绑定到视图中,当model数据发生了改变,所有用到显示树的{{}}},里面数据会自动更新。
注意:不能使用大胡子语法动态绑定属性

2,指令(13种)
什么是指令?
Directive,指令就是为html添加新功能的自定义属性,因为html本身是静态的,不具备任何的动态生成能力,所以当我们想要 在html种使用一些特征的时候,就要进行绑定
v-bind

el:

挂载点:支持id,class,标签选择器。(同时也作用到子代元素)
建议使用id选择器
只支持双标签,不能用body,html
2,双花括号里可以写三目运算符,可以写计算数值,进行==,进行比较><(不推荐在双花括号里写这写)

data

数据对象
可以写复杂数据,遵守js中的语法

<div id="app">
        {{message}}
        <h2>{{school.name}}</h2>
        <h3>{{arr[0]}}</h3>
    </div>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                message:"哈哈哈哈",
                school:{
                    name:"lili",
                },
                arr:["1","2","3"]
            }
        })
    </script>

v-text 设置标签的文本值

<div id="app">
        <h2 v-text="message">当丁丁打</h2>
        <!-- 结果是哈哈哈哈, -->
        <!-- 因为v-text覆盖该标签下的所有的文本, v-text="message"中可以使用拼接字符串-->
        <h2>成都{{message}}</h2>
    </div>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                message:"哈哈哈哈"
            }
        })
    </script>

v-html:设置标签的innerHtml

可以解析网页也可以点

<div id="app">
    <p v-html="content"></p>
    </div>
    
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                content:"<a href=''>百度</a>"
            }
        })
    </script>

v-on:为元素绑定事件

<div id="app">
         <button type="button" v-on:click="doit">点击1</button>
         <!-- 简写模式 -->
         <button type="button" @click="doit">点击</button>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                    el: '#app',
                    data: {
                        count:0
                    },
                    methods: {
                        doit: function () {
                           alert("做个程序元")
                        }
                    }
                });
<div id="app">
        <h2>{{food}}</h2>
        <button type="button" @click="changefood">添加食物</button>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                    el: '#app',
                    data: {
                        food:"番茄炒蛋"
                    },
                    methods: {
                        changefood: function () {
                           this.food+="蛋炒番茄"
                        }
                    }
                });
        </script>

补充
v-on传递自定义参数,事件修饰符

<div id="app">
            <button type="button" @click="doit(666,888)">点击</button>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                    el: '#app',
                    data: {
                     
                    },
                    methods:{
                    doit:function(x1,x2){
                        console.log(x1);
                        console.log(x2)
                    }   
                    }
                });
        </script>

问题:如果我们将button按钮换成a标签,href=".."属性,默认会改变我们的地址栏或跳转到其他页面
解决问题:(阻止默行为)
1. js中
实参:event
function(e){
e.preventDefault();
}
2.vue中
实参:\(event
fn(e){
e.preventDefault();
}
提示:\)event是vue对象的内置变量,是将DOM事件对象e封装后得到的产物,是现成的内置变量,可以直接使用,只要想要vue的处理函数中使用事件对象,就必须在html绑定的调用方法中传入$event

3. 使用事件修饰符
事件修饰符会自动实现原DOM事件对象操作的特殊属性,当需要修改事件的行为时,就要使用事件修饰符
.prevent
使用.prevent代替内置变量\(event下的e.preventDefault(),阻止默认行为
.stop
使用.stop代替内置变量\)event下的e.stopPropagation(),取消冒泡/蔓延

多个修饰符可以同时修饰同一个事件,而且与顺序无关

v-show:根据表达式的真假,地址元素的显示和隐藏(修改display:none)

<div id="app">
        <h2 v-show="isShow">哈哈哈哈</h2>
        <button type="button" @click="changeshow">点击显示和隐藏</button>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                    el: '#app',
                    data: {
                        isShow:"ture"
                    },
                    methods: {
                        changeshow: function () {
                           this.isShow=!this.isShow
                        }
                    }
                });
        </script>

v-if 根据表达式的真假,地址元素的显示和隐藏(操作Dom元素,直接将元素从DOM树移除)

//如果haha大于1就显示哈哈哈哈
//如果小于1就显示heheehehe
<div id="app">
        <h2 v-if="haha>1">哈哈哈哈</h2>
        <h2 v-else>heheheheheh</h2>
        //也可以多个选一个
        //v-if
        //v-else-if
        //...
        //v-else
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                    el: '#app',
                    data: {
                        haha:0,
                    },
                    methods: {
                       
                    }
                });
        </script>
        //其他用法和v-show一样

面试题:为什么被移除的元素还能显示回来呢

v-bind:设置元素属性(src,tilte,class)

//src
<div id="app">
            <img v-bind:src="imgsrc" >
            <!-- 简写 -->
            <img :src="imgsrc" >
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                    el: '#app',
                    data: {
                        imgsrc:"img/sheng1.jpg"
                    },
                    methods: {
                       
                    }
                });
        </script>
//title
<div id="app">
            
            <img :src="imgsrc" :title="imgtitle" >
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                    el: '#app',
                    data: {
                        imgsrc:"img/sheng1.jpg",
                        imgtitle:"哈哈啊哈哈"
                    },
                    methods: {
                       
                    }
                });
//class
<style type="text/css">
            img{
                width: 50px;
                height: 50px;
            }
            .active{
                
                border: 5px solid #ff0;
            }
        </style>
    </head>
    <body>
        <div id="app">
            
            <img :src="imgsrc" :title="imgtitle" :class="{active:isActive}" @click="toggleActive" >
            //如果isActive为ture这个类的样式就显示
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                    el: '#app',
                    data: {
                        imgsrc:"img/sheng1.jpg",
                        imgtitle:"哈哈啊哈哈",
                        isActive:false
                    },
                    methods: {
                       toggleActive:function(){
                           this.isActive=!this.isActive;
                       }
                    }
                });
        </script>
    </body>
</html>

v-for:根据数据生成列表

<div id="app">
        <ul>
            <li v-for="item in arr">{{item}}</li>
            //可以自动循环出四个列表
        </ul>   
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                    el: '#app',
                    data: {
                       arr:[1,2,3,4]
                    },
                    methods: {
                       toggleActive:function(){
                           this.isActive=!this.isActive;
                       }
                    }
                });
        </script>

<div id="app">
        <h2 v-for="item in vegtables">{{item.name}}</h2>
            
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                    el: '#app',
                    data: {
                       vegtables:[
                           {name:"小红"},
                           {name:"小名"}
                       ]
                    },
                });
        </script>

注意:of可以代替in,因为要更接近js迭代器语法

v-model 获取和设置表单元素(双向绑定)

<div id="app">
            <button type="button" @click="setM">修改message的值</button>
            <input type="text" v-model="message" name="" id="" value="" />
            
            <h2>{{message}}</h2>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                    el: '#app',
                    data: {
                     message:"黑马"
                    },
                    methods:{
                        setM:function(){
                            this.message="成都"
                        }
                    }
                });
        </script>

v-cloak:防止用户看到{{}}语法

当网速较慢,vue。js还没有加载完成的时候页面上会闪动{{}}的字样,知道vue创建实例,编译模板时,DOM才被替换 ,这个过程是有闪动的

<style type="text/css">
            [v-cloak]{
                display: none;
            }
        </style>

v-once:只绑定一次,设定之后就不可改

<div id="app">
            <p v-once>{{message}}</p>
            <button type="button" @click="change">点击改变值</button>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                    el: '#app',
                    data: {
                     message:"不可改变的1234"
                    },
                    methods:{
                    change:function(){
                        this.message="西兰花"
                    }
                    }
                });
        </script>

学习心得

终于要开始校招和面试了,希望自己加油

标签

评论

this is is footer