Vue.js

最新推荐文章于 2022-07-25 20:49:17 发布

tian_to_tian

最新推荐文章于 2022-07-25 20:49:17 发布

阅读量195

点赞数

分类专栏：国信安文章标签： vue.js

本文链接：https://blog.csdn.net/tian_to_tian/article/details/120032483

版权

国信安专栏收录该内容

42 篇文章 2 订阅

订阅专栏

一、Vuejs介绍

vue.js：是一套构建用户界面的渐进式JavaScript框架。与其他重量级框架不同的是，vue采用自底向上增量开发的设计。vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，vue也完全能够为复杂的单交应用程序提供驱动。

渐进式：主张最少、自底向上。

优雅降级（Graceful Degradation）：一开始就构建站点的完整旎，然后针对浏览器测试和修复。比如一开始使用CSS3的特性构建了一个应用，然后逐步针对各大浏览器进行hack 使其可以在低版本浏览器上正常浏览。

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

自顶向下：

自底向上：先编写出基础程序段，然后再逐步扩大规模、补充和升级某些功能

Vue.js作者：尤雨溪、尤大大

vue生态系统、vue技术栈、vue全家桶：vue.js、vuex、axios、voe-router、element-ui（pc端）、vant ui（移动端）、服务端渲染（SEO问题）。

二、什么是单页面应用

三大框架，主要都用于单页面应用。

单页Web应用(single page web application，SPA)：就是只有一张Web页面的应用。单页应用程序（SPA）是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

优点：

1、分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起；

2、减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；

3、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。

缺点：

1、SEO问题，现在可以通过Prerender等技术解决一部分；

2、前进、后退、地址栏等，需要程序进行管理。

三、mvvm架构

node.js中MVC架构：指整个项目

M：数据层，提供数据

V：视图，和用户进行交互，显示页面

C：控制层，业务逻辑

mvvm架构：只针对视图层

M（Model）：js存储的数据

VM（ViewModel）：vue.js提供的，实现model和view的数据交互，实现vue的双向数据绑定的核心技术。

V（View）：视图层，html展示

四、vue的安装和使用

1、直接在官网下载vue.js

2、使用

引用vue.js文件

//自动挂载
let vm = new Vue({
    el:"#app",    //id为app的元素，将vue进行管理（viewModel）
    data:{
        message:"我的第一个vue.js"
    }
})

//手动挂载
let vm = new Vue({
    data:{
        message:"我的第一个vue.js"
    }
}).$mount("#app");

vue.js可以用于多页面应用开发

五、vue属性和方法

全局属性：

Vue.config

全局方法：

Vue.filter()
Vue.mixin()

实例属性：

vm.$data        //返回的是一个对象，vm.键名 相当于 vm.$data.message
vm.$el        //挂载的节点，返回的是一个dom节点

注：vue2.0起，就不能挂载在html和body上了

实例方法：

vm.$mount();
vm.$set();        //修改数据。特点：蟹盖数据后dom会重新渲染
vm.$nextTick();        //dom更新完成后执行
vm.$watch();        //监视某一个值的变化

六、Vue指令

v-text    //显示成文本
v-html    //可以解析html标签
v-show    //是否显示 true：显示；false：隐藏
v-if    //判断 条件为真显示；为假不渲染
v-else    //否则
v-else-if    //否则如果

v-for
    <div v-for="(item, index) in items"></div>
    <div v-for="(val, key) in object"></div>
    <div v-for="(val, name, index) in object"></div>
    <div v-for="item in items" :key="item.id">
        {{ item.text }}
    </div>
注：最好写上key属性，如果有唯一id,就绑定id， 没有可以用index

v-bind    //绑定元素的属性
v-model    //在表单控件或者组件上创建双向绑定

v-show和v-if的区别：v-if会被销毁和重建，只有条件为真时才会开始渲染；v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于css进行切换。一般来说， v-if有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

七、生命周期（vue实例的生命周期）

钩子函数：

beforeCreate:function(){}    创建前
created    创建后
beforeMount    挂载前
mounted    挂载后
beforeUpdate    更新前
updated    更新后
beforeDestory    销毁前
destoryed    销毁后

钩子函数示例：

<script src="js/vue.js"></script>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#app",
        data: {
            a: "Vue.js"
        },
        beforeCreate: function() {

            console.log("创建前")
            console.log(this.a)
            console.log(this.$el)
        },
        created: function() {
            console.log("创建之后");
            console.log(this.a)
            console.log(this.$el)
        },
        beforeMount: function() {
            console.log("mount之前")
            console.log(this.a)
            console.log(this.$el)
        },
        mounted: function() {
            console.log("mount之后")
            console.log(this.a)
            console.log(this.$el)
        },
        beforeUpdate: function() {
            console.log("更新前");
            console.log(this.a)
            console.log(this.$el)
        },
        updated: function() {
            console.log("更新完成");
            console.log(this.a);
            console.log(this.$el)
        },
        beforeDestroy: function() {
            console.log("销毁前");
            console.log(this.a)
            console.log(this.$el)
            console.log(this.$el)
        },
        destroyed: function() {
            console.log("已销毁");
            console.log(this.a)
            console.log(this.$el)
        }
    });
</script>

八、事件绑定

v-on    //绑定事件，简写@
事件对象使用$event

修饰符：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

示例：

<div @click="foo('yeye',$event)">
    爷爷
        <div @click="foo('baba')">
            爸爸
            <div  @click.stop="foo('haizi')">
                孩子
            </div>
        </div>
</div>

九、vue过滤器

过滤器本质是函数，函数有参数且有返回值。

使用方法：在绑定的属性后面加“| 过滤器名字”；绑定的属性将会作为参数传给过滤器，处理后，返回结果；显示在当前位置。

{{ new Date() | quanDate }}

//全局
Vue.filter()

//局部
filters:{
            DisplayDateString:function (value){
                var d = new Date(value);
                // return d.toLocaleDateString().replace(/\//g,"-");
                var month = (d.getMonth()+1).toString().length==2?d.getMonth()+1:
                    "0"+(d.getMonth()+1);
                var day = (d.getDate()+1).toString().length==2?d.getDate()+1:
                    "0"+(d.getDate()+1);
                return d.getFullYear()+"-"+month+"-"+day;
            }
        }

html中：

<div> {{ new Date() | quanDate }} </div>

十、计算属性

本质：是一个属性，对应的是一个值，相当于属性
实质：是一个函数；函数必须返回一个值，使用时，相当于一个属性一样去使用

十一、自定义指令direactives

1、directives是什么？

注册自定义的指令

2、directives有什么作用？

对普通 DOM 元素进行底层操作，就会用到自定义指令

3、directives怎么使用？

参考：https://cn.vuejs.org/v2/guide/custom-directive.html

全局指令：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部指令：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

十二、set方法

向响应式对象中添加一个property，并确保这个新 property 同样是响应式的，且触发视图更新。

语法：

Vue.set( target,propertyName/index,value );
或
this.$set(target,propertyName/index,value );

参数1：要修改的对象
参数2：属性名 | 下标
参数3：属性的
返回值：已经修改好的值

情况：data里的数据修改成功, 视图没有更新通过set来修改()

示例1：

this.$set(this.linshi[this.index],"name",this.linName);
this.$set(this.linshi[this.index],"price",this.price);

示例2：

this.$set(this.$data,"linshi",newlinshi);

tian_to_tian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js

一、Vuejs介绍 vue.js：是一套构建用户界面的渐进式JavaScript框架。与其他重量级框架不同的是，vue采用自底向上增量开发的设计。vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，vue也完全能够为复杂的单交应用程序提供驱动。渐进式：主张最少、自底向上。优雅降级（Graceful Degradation）：一开始就构建站点的完整旎，然后针对浏览器测试...
复制链接

扫一扫