VUE

最新推荐文章于 2025-06-04 10:18:59 发布

原创最新推荐文章于 2025-06-04 10:18:59 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

尚硅谷学习笔记专栏收录该内容

11 篇文章

订阅专栏

VUE

一、简介

是渐进式JavaScript框架

作用：

动态构建用户界面
特点
- 遵循MVVM模式
- 编码简洁，体积小，运行效率高，适合移动/PC端开发
- 它本身只关注UI，可以轻松引入vue插件或者其他第三库开发项目
与其他前端JS框架的关联
- 借鉴angular的模板和数据绑定技术
- 借鉴react的组件化和虚拟DOM技术
vue扩展插件
- vue-cli: vue 脚手架
- vue-resource(axios): ajax 请求
- vue-router: 路由
- vuex: 状态管理
- vue-lazyload: 图片懒加载
- vue-scroller: 页面滑动相关
- mint-ui: 基于 vue 的 UI 组件库(移动端)
- element-ui: 基于 vue 的 UI 组件库(PC 端)
vue的MVVM

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eAc3z9Zp-1621839417693)(C:\Users\22332\AppData\Roaming\Typora\typora-user-images\image-20210516083955831.png)]

二、vuetest模块

1.helloword示例

引入vue.js
创建vue对象

el:指定根element(选择器)

data:初始化数据(页面可以访问到)
双向数据绑定：v-model
显示数据：{{xxx}}
理解vue的mvvm实现

<div id="app"><!--view-->
    <input type="text" v-model="name">
    <p>Hello {{name}}</p>
    <p v-text="name"></p>
</div>
<p>{{name}}</p>
<script src="../js/vue.js"></script>
<script>
    //创建vue实例
    const vm =new Vue({//配置对象
        el:'#app',//element:选择器字符串
        data:{//数据(model)
            name:'afty!'
        }
    })
    vm.name ='xffang'
</script>
<!-- 
    MVVM：
    model：模型，数据对象（data)
    view:视图，模板页面
    viewmodel:视图模型(vue的实例)
 -->

2.模板语法

模板的理解:
动态的html页面
包含了一些JS语法代码
大括号表达式
指令(以v-开头的自定义标签属性)
双大括号表达式
语法: {{exp}} 或 {{{exp}}}
功能: 向页面输出数据
可以调用对象的方法
指令一: 强制数据绑定
功能: 指定变化的属性值
完整写法:
v-bind:xxx=‘yyy’ //yyy会作为表达式解析执行
简洁写法:
:xxx=‘yyy’
指令二: 绑定事件监听
功能: 绑定指定事件名的回调函数
完整写法:
v-on:click=‘xxx’
简洁写法:
@click=‘xxx’

<div id="app">
  <h2>1. 双大括号表达式</h2>
  <p>{{content}}</p>
  <p>{{content.toUpperCase()}}</p>

  <h2>2. 指令一: 强制数据绑定</h2>
  <a href="url">访问指定站点</a><br>
  <a v-bind:href="url">访问指定站点2</a><br>
  <a :href="url">访问指定站点2</a><br>

  <h2>3. 指令二: 绑定事件监听</h2>
  <button v-on:click="test">点我</button>
  <button @click="test">点我</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      content: 'NBA I Love This Game',
      url: 'http://www.atguigu.com'
    },
    methods: {
      test () {
        alert('好啊!!!')
      }
    }
  })
</script>

3.计算属性和监视

计算属性
在computed属性对象中定义计算属性的方法

在页面中使用{{方法名}}来显示计算的结果

监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算

<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
    const vm =new Vue({
        el:'#demo',
        data:{
            firstName:"A",
            lastName:"B",
            fullName2: 'A B'
        },
        computed:{//配置计算属性
            //什么时候执行：初始化显示/相关的data属性数据发生改变
            //计算并返回当前属性的值
            fullName1(){//计算属性中的一个方法，方法的返回值作为属性值
                console.log("fullName1()");
                return this.firstName+' '+this.lastName
            },
            fullName3:{
                //1.你定义的，2.你没有调用，3.但最终它执行了
                //1.什么时候调用？，2。用来做什么
                //回调函数 当读取当前属性值回调，根据相关数据j计算并执行当前属性的值
                get(){
                    return this.firstName+' '+this.lastName
                },
                //回调函数，当属性值发生改变时回调，更新相关的属性数据
                set(value){//value就是fullname3的最新属性值
                    const names=value.split(' ')
                    this.firstName =names[0]
                    this.lastName=[1]
                }
            }
        },
        watch:{//配置监视
            firstName:function (value){//firstName发生改变
                console.log(this);//就是VM对象
                this.fullName2= value+' '+this.lastName
            }
        }
    })
    vm.$watch('lastName',function (value) {
        //更新fullname2
        this.fullName2 =this.firstName+' '+value
      })
      </script>

4.class与style绑定

理解
在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
class绑定: :class=‘xxx’
xxx是字符串
xxx是对象
xxx是数组
style绑定
:style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
其中activeColor/fontSize是data属性

<style>
        .aClass{
            color: rebeccapurple;
        }
        .bClass{
            color: red;
        }
        .cClass{
            font-size: 30px;
        }
</style>
<body>
<div id="demo">
    <h2>1.class绑定： :class='xxx'</h2>
    <p class="cClass" :class="a">xxx是字符串</p>
    <p  :class="{aClass:isA,bClass:isB}">xxx是对象</p>
    <p :class="['aClass', 'bClass']">xxx是数组</p>

    <h2>2.style绑定： </h2>
    <p :style="{color:activeColor, fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>
    <button @click="update">更新</button>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#demo',
        data:{
            a:'aClass',
            isA:true,
            isB:false,
            activeColor:'red',
            fontSize:20
        },
        methods:{
            update(){
                this.a='bClass',
                this.isA=false,
                this.isB=true,
                this.activeColor ='green',
                this.fontSize ='30'
            }
        }
    })
</script>
</body>

5.条件渲染

条件渲染指令
v-if
v-else
v-show
比较v-if与v-show
如果需要频繁切换 v-show 较好

<div id="demo">
  <p v-if="ok">表白成功</p>
  <p v-else>表白失败</p>

  <hr>
  <p v-show="ok">求婚成功</p>
  <p v-show="!ok">求婚失败</p>

  <button @click="ok=!ok">切换</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      ok: true,
    }
  })
</script>

6.列表渲染

列表显示
数组: v-for / index
对象: v-for / key
列表的更新显示
删除item
替换item

7.事件处理

绑定监听:
v-on:xxx=“fun”
@xxx=“fun”
@xxx=“fun(参数)”
默认事件形参: event
隐含属性对象: $event
事件修饰符:
.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
按键修饰符
.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键

<div id="example">

  <h2>1. 绑定监听</h2>
  <button @click="test1">test1</button>
  <button @click="test2('abc')">test2</button>
  <button @click="test3('abcd', $event)">test3</button>

  <h2>2. 事件修饰符</h2>
  <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
  <div style="width: 200px;height: 200px;background: red" @click="test5">
    <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
  </div>

  <h2>3. 按键修饰符</h2>
  <input type="text" @keyup.13="test7">
  <input type="text" @keyup.enter="test7">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {

    },
    methods: {
      test1(event) {
        alert(event.target.innerHTML)
      },
      test2 (msg) {
        alert(msg)
      },
      test3 (msg, event) {
        alert(msg+'---'+event.target.textContent)
      },

      test4 () {
        alert('点击了链接')
      },

      test5 () {
        alert('out')
      },
      test6 () {
        alert('inner')
      },

      test7 (event) {
        console.log(event.keyCode)
        alert(event.target.value)
      }
    }
  })
</script>

8.表单输入绑定

使用v-model(双向数据绑定)自动收集数据

text/textarea
checkbox
radio
select

9.vue实例—生命周期

vue对象的生命周期
1). 初始化显示
- beforeCreate()
- created()
- beforeMount()
- mounted()
2). 更新状态

beforeUpdate()
- updated()
3). 销毁vue实例: vm.$destory()
- beforeDestory()
- destoryed()

常用的生命周期方法
created()/mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器

<div id="test">
    <button @click="destroyVue">destory vue</button>
    <p v-if="isShow">尚硅谷IT教育</p>
  </div>
  
    <script src="../js/vue.js"></script>
    <script>
  new Vue({
    el: '#test',
    data: {
      isShow: true
    },

    mounted () {
      // 执行异步任务
      this.intervalId = setInterval(() => {
        console.log('-----')
        this.isShow = !this.isShow
      }, 1000)
    },

    beforeDestroy() {
      console.log('beforeDestroy()')
      // 执行收尾的工作
      clearInterval(this.intervalId)
    },

    methods: {
      destroyVue () {
        this.$destroy()
      }
    }
  })
    </script>

10.vue_动画

vue动画的理解
操作css的trasition或animation
vue会给目标元素添加/移除特定的class
基本过渡动画的编码
1). 在目标元素外包裹
2). 定义class样式
1>. 指定过渡样式: transition
2>. 指定隐藏时的样式: opacity/其它
过渡的类名
xxx-enter-active: 指定显示的transition
xxx-leave-active: 指定隐藏的transition
xxx-enter: 指定隐藏时的样式

    <style>
        /* 显示/隐藏的过滤效果 */
        .xxx-enter-active,.xxx-leave-active{
            transition: opacity 1s;
        }
        /* 隐藏时的样式 */
        .xxx-xxx-enter,.xxx-leave-to{
           opacity: 0;
        }
        /* 显示的过滤效果 */
        .move-enter-active{
            transition: all 1s;
        }
        /* 隐藏的过滤效果 */
        .move-enter .move-live-to{
            opacity: 0;
            transform: translateX(20px);
        }
    </style>
      <div id="test">
        <button @click="isShow=!isShow">toggle</button>
        <transition name="xxx">
            <p v-show="isShow" class="xxx-enter-to">hello</p> 
        </transition>
     </div>
     <div id="test2">
        <button @click="isShow=!isShow">toggle</button>
        <transition name="move">
            <p v-show="isShow" class="move-enter-to">hello</p> 
        </transition>
     </div>
     <script src="../js/vue.js"></script>
     <script>
         new Vue({
             el:'#test',
             data() {
                 return {
                     isShow:true
                 }
             },
         })
         new Vue({
             el:'#test2',
             data() {
                 return {
                     isShow:true
                 }
             },
         })
     </script>
</body>

<style>
    .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
  </style>
<div id="example-2">
    <button @click="show = !show">Toggle show</button>
    <br>
    <transition name="bounce">
    <p v-if="show" style="display: inline-block">Lorem</p>
    </transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
  new Vue({
    el: '#example-2',
    data: {
      show: true
    }
  })
</script>

11.过滤器

功能:

对要显示的数据进行特定格式化后再显示

注意:

并没有改变原本的数据, 可是产生新的对应的数据

定义和使用过滤器

定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,...]){
    // 进行一定的数据处理
     return newValue
})

使用过滤器

{{myData | filterName}}
{{myData | filterName(arg)}}

<!-- 需求：对当前时间进行指定格式显示 -->
<div id="test">
    <h2>显示格式化的日期时间</h2>
    <p>{{date}}</p>
    <p>完整版：{{date | dateString}}</p>
    <p>年月日：{{date | dateString('YYYY-MM-DD')}}</p>
    <p>时分秒：{{date | dateString('HH:mm:ss')}}</p>
</div>
<script src="../js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<script>
    //自定义过滤器
    Vue.filter('dateString',function (value,format) {  
        return moment(value).format(format || 'YYYY-MM-DD-HH:mm:ss');
    })
    new Vue({
        el:'#test',
        data: {
            date:new Date()
        }
    })
</script>

12.vue指令

常用内置指令

v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为 true, 当前标签才会输出到页面
v-else: 如果为 false, 当前标签才会输出到页面
v-show : 通过控制 display 样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略 v-bind
v-model : 双向数据绑定
ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

自定义指令

注册全局指令

Vue.directive('my-directive', function(el, binding){ 
	el.innerHTML = binding.value.toupperCase() 
})

注册局部指令

 directives : { 
 	'my-directive' : { 
 		bind (el, binding) { 
 			el.innerHTML =binding.value.toupperCase() 
 		}
 	} 
 }

使用指令

v-my-directive='xxx'

se**: 如果为 false, 当前标签才会输出到页面

v-show : 通过控制 display 样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略 v-bind
v-model : 双向数据绑定
ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

自定义指令

注册全局指令

Vue.directive('my-directive', function(el, binding){ 
	el.innerHTML = binding.value.toupperCase() 
})

注册局部指令

 directives : { 
 	'my-directive' : { 
 		bind (el, binding) { 
 			el.innerHTML =binding.value.toupperCase() 
 		}
 	} 
 }

使用指令

v-my-directive='xxx'