Vue基础

最新推荐文章于 2024-04-27 20:35:11 发布

读书是儒宗

最新推荐文章于 2024-04-27 20:35:11 发布

阅读量753

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43342445/article/details/122302481

版权

Vue基础

一、创建vue对象
二、数据的双向绑定
三、计算属性-监视属性-双向绑定
四、列表显示
五、事件的绑定
六、vue对象的生命周期
七、vue动画
八、Vue自定义指令

一、创建vue对象

new Vue({
   
        el:'#root',   //指定根element
        data:{
         // 初始化数据(页面可以访问)
            name:'wangchao',
            address:'合肥'
        }
    })
// el和data的另外一个写法
// el:
const v = new Vue({
   
        data:{
   
            name:'haha'
        }
    })
    v.$mount('#root')
// data:
    data(){
   
        console.log('@@@',this)   //this的指向是vue实例对象
        return {
   
            name:'wangchao'
        }
    }

二、数据的双向绑定

2.1 v-model & 显示数据: {undefined{xxx}}插值语法

<body>
      <input type="text" v-model="msg"><br><!--指令-->
      <p>Hello {
   {
   msg}}</p><!--大括号表达式-->
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
      const vm = new Vue({
    // 配置对象 options 
        // 配置选项(option)
        el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
        data: {
    // 数据（model）
          msg: 'World'
        }
      })
    </script>
</body>

2.2 插值语法和指令语法

插值语法：{
   undefined{
   xxx}}，xxx是js表达式，且可以直接读取到data中的所有
指令语法：强制数据绑定 v-bind:  、 绑定事件监听 v-on，用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:href=“xxx”或 简写为 :href=“xxx”
备注：Vue中有很多的指令，且形式都是：v-???

2.3 单向数据绑定和双向数据绑定

单向：
语法：v-bind:href ="xxx" 或简写为 :href ="xxx"
双向：
语法：v-mode:value="xxx" 或简写为 v-model="xxx"

2.4 绑定事件监听 v-on:

一般：
v-on:click='xxx'  /   v-on:keyup='xxx(参数)'  /  v-on:keyup.enter='xxx'
简写：
@click='xxx'  /   @keyup='xxx'  /   @keyup.enter='xxx'

2.5 v-text

与插值语法的区别：v-text会替换掉节点中的内容，{
   {
   xx}}则不会。

2.6 v-html

向指定节点中渲染包含html结构的内容。与插值语法的区别：
    (1).v-html会替换掉节点中所有的内容，{
   {
   xx}}则不会。
    (2).v-html可以识别html结构。

2.7 条件渲染指令

v-if="表达式"v-else-if="表达式"v-else="表达式"
特点：不展示的DOM元素直接被移除。

2.8 v-show

v-show="表达式"
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉 
备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。

三、计算属性-监视属性-双向绑定

3.1 computed计算属性

定义：要用的属性不存在，要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

3.2 watch监视属性

1.通过vm对象的$watch()或watch配置来监视指定的属性,当属性变化时, 回调函数自动调用, 在函数内部进行计算
2.监视的两种写法：
    (1). new Vue时传入watch配置
    (2). 通过vm.$watch监视
3.深度监视：
vue中的watch默认不监测对象内部值的改变（一层）,Vue自身可以监测对象内部值的改变.
配置deep:true可以监测对象内部值改变（多层）。

3.3 计算属性与监视属性的区别

computed能完成的功能，watch都可以完成;watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

3.4 class样式绑定和style绑定

class:
定义：某个(些)元素的样式是变化的，class/style 绑定就是专门用来实现动态样式效果的技术
:class='xxx' // xxx可以是字符串、对象、数组。
style:  
:style="{ color: activeColor, fontSize: fontSize + 'px' }"  //  绑定的对象、绑定的数组、属性

案例1:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>绑定样式</title>
  <style>
    .basic {
   
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
    .happy {
   
      border: 4px solid red;
      ;
      background-color: rgba(255, 255, 0, 0.644);
      background: linear-gradient(30deg, yellow, pink, orange, yellow);
    }
    .sad {
   
      border: 4px dashed rgb(2, 197, 2);
      background-color: gray;
    }

    .itw1 {
   
      background-color: yellowgreen;
    }

    .itw2 {
   
      font-size: 30px;
      text-shadow: 2px 2px 10px red;
    }

    .itw3 {
   
      border-radius: 20px;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>

  <!-- 准备好一个容器-->
  <div id="root">
    <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{
   {
   name}}</div> 
    <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
    <!-- 绑定class样式

最低0.47元/天解锁文章

读书是儒宗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础

Vue基础一、创建vue对象二、数据的双向绑定三、计算属性-监视属性-双向绑定四、列表显示五、事件的绑定六、vue对象的生命周期七、vue动画八、Vue自定义指令一、创建vue对象new Vue({ el:'#root', //指定根element data:{ // 初始化数据(页面可以访问) name:'wangchao', address:'合肥' } })// el和dat
复制链接

扫一扫