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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值