vueday1

半张饭卡

已于 2022-06-15 08:58:14 修改

阅读量156

点赞数

分类专栏： vue 文章标签： vue.js javascript vscode

于 2022-06-14 23:03:17 首次发布

本文链接：https://blog.csdn.net/qq_35371323/article/details/125287630

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

0. 环境准备

vsCode下载地址:http://vscode.bianjiqi.net/
vsCode 设置字体大小

File -> Preferences -> Settings ，点击Text Editor -> Font ，右边点击Edit in setting,json，加上代码 “editor.mouseWheelZoom”: true
下载vue.js ，地址： https://cn.vuejs.org/v2/guide/installation.html
安装插件 open in browser

打开vscode软件→点击左侧第五个图标→搜索open in brower→下载

1. 第一个程序helloworld

需要引入vue.js文件：

<body>
  <div id="root">

    <h1>hello, {{name}}</h1>
  </div>
</body>

<script type="text/javascript">
  // 阻止Vue在启动时生成生产提示
  Vue.config.productionTip = false
  // 创建Vue实例
  new Vue({
    el: "#root",
    data: {
      name: "张三"
    }
  })
</script>

2. 插值语法和指令语法

<body>
  <!-- 
      1.插值语法
        功能：用于解析标签体内容
        语法：{{XXX}}，XXX是js表达式，且可以直接读取data中的所有属性值
      2.z指令语法
        功能：
        语法：v-bind:href="XXX" 或简写为：:href="XXX"，XXX是js表达式，且可以直接读取data中的所有属性值
    
   -->
  <div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr>

    <h1>指令语法</h1>
    <a v-bind:href="url">百度一下,{{name}}</a>
    <a :href="url">百度一下2,{{name}}</a>
  </div>
</body>

<script type="text/javascript">
  // 阻止Vue在启动时生成生产提示
  Vue.config.productionTip = false
  // 创建Vue实例
  new Vue({
    el: "#root",
    data: {
      name:"张三",
      url: "http://www.baidu.com"
    }
  })
</script>

3.单向绑定和双向绑定

<body>
  <!--
      Vue中2种数据绑定方式
        1.单向绑定(v-bind):数据只能从data流向页面
        2.双向绑定(v-model):数据不仅能data流向页面,还能从页面流向data
          注意：
            1.双向绑定一般都是应用在表单类元素上（如，input、select等）
            2.v-model：value 可以简写成v-model，因为v-model默认收集的就是value值
   -->
  <div id="root">
    <!-- 普通写法-->
    单项数据绑定：<input type="text" v-bind:value="name"><br>
    双向数据绑定：<input type="text" v-model:value="name"><br>

    <!-- 简单写法-->
    单项数据绑定：<input type="text" :value="name"><br>
    双向数据绑定：<input type="text" v-model="name"><br>
  </div>
</body>

<script type="text/javascript">
  // 阻止Vue在启动时生成生产提示
  Vue.config.productionTip = false
  // 创建Vue实例
  new Vue({
    el: "#root",
    data: {
      name: "张三"
    }
  })
</script>

4. el和data的两种写法


<body>
   <!--
      data和el的两种写法
        1. el有2种写法
            （1）new Vue是配置el属性
            （2）先创建Vue实例，随后再通过vm.$mount("#root") 指定el的值
        2. data有2种写法
            （1）对象式
            （2）函数式
   -->
  <div id="root">
    <h1>你好，{{name}}</h1>
  </div>
</body>

<script type="text/javascript">
  // 阻止Vue在启动时生成生产提示
  Vue.config.productionTip = false

  // data两种写法
  const vm =  new Vue({
    el: "#root",
    // 第一种：对象式
    /*data: {
      name: "张三"
    }*/

    // 第二种：函数式
    data(){
      return{
        name:"张三"
      }
    }
  })
  /*console.log(vm)
  vm.$mount("#root")*/
</script>

5.MVVM模型

##### 在这里插入图片描述

6.Object.defineProperty

<script type="text/javascript">
  let number = 18
  let person = {
    name: "张三",
    sex: "男",
  }
  Object.defineProperty(person, "age", {
    // enumerable: true, //控制属性是否可以枚举 ，默认false
    // writable: true,  //控制属性是否可以被修改，默认false
    // configurable: true // 控制属性是否可以被删除，默认false

    get(){
        console.log("有人读取了age属性")
        return number
    },

    set(value){
        console.log("有人修改了age属性，且值是",value)
        number = value
    }
  })
</script>

7. 事件处理

<body>
  <!-- 
       事件的基本使用
            1.使用v-on:XXX 或@XXX 绑定事件，其中XXX是事件名
            2.事件的回调需要配置在method中，最终会在vm上
            3.methods 中配置的函数，不要使用箭头函数，否则this就不是vm了
            4.methods 中配置的函数，都将被Vue所管理
            5.@click="showInfo" 和@click($event) 效果一致，但是后者可以传参
   -->
  <div id="root">
    <h1>你好，{{name}}</h1>
    <!-- 普通写法 -->
    <button v-on:click="showInfo">无参弹窗</button>
    <!-- 简写 -->
    <button @click="showInfo1(66,$event)">有参弹窗</button>
  </div>
</body>

<script type="text/javascript">
  const vm = new Vue({
    el: "#root",
    data: {
      name: "zhangsan"
    },
    methods: {
      showInfo(event) {
        console.log(event.target.innerText)
        console.log(this) // 此处的this是vm
        alert("无参")
      },
      showInfo1(id, event) {
        console.log(id)
        alert("有参")
      }
    }
  })
</script>

8. 事件6个修饰符

<style>
  * {
    margin: 20px;
  }

  .demo1 {
    height: 50px;
    background-color: skyblue;
  }

  .box1 {
    background-color: yellowgreen;
  }

  .box2 {
    background-color: red;
  }

  .list {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    overflow: auto;
  }

  ul li {
    height: 50px;

  }
</style>

<body>
  <!-- 
       事件的修饰符：
              1.prevent：阻止默认事件（常用）
              2.stop：阻止事件冒泡（常用）
              3.once：事件只触发一次
              4.capture：使用事件捕获模式
              5.self：只有event.target是当前操作的元素时才触发事件          
              6.passive：事件的默认行为立即执行，无需等待时间回调执行完毕
   -->
  <div id="root">
    <h1>你好，{{name}}</h1>

    <!--  阻止默认事件（常用）-->
    <a href="http://www.baidu.com" @click.prevent="showInfo">百度一下</a>
    <!--  阻止事件冒泡（常用）-->
    <div class="demo1" @click="showInfo">
      <button @click.stop="showInfo">点击</button>
    </div>
    <!--  事件只触发一次（常用）-->
    <div class="box1" @click.capture="showMsg(1)">
      div1
      <div class="box2" @click="showMsg(2)">
        div2
      </div>
    </div>
    <!--  只有event.target是当前操作的元素时才触发事件    -->
    <div class="demo1" @click.self="showInfo">
      <button @click="showInfo">点击</button>
    </div>
    <!--  事件的默认行为立即执行，无需等待时间回调执行完毕-->
    <!--  @wheel 鼠标滑轮滚动执行-->
    <!--  @scroll 鼠标滑轮滚动、键盘上下箭 也执行-->
    <ul class="list" @wheel.passive="demo">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</body>

<script type="text/javascript">
  const vm = new Vue({
    el: "#root",
    data: {
      name: "zhangsan"
    },
    methods: {
      showInfo(event) {
        alert("#")
      },
      showMsg(id) {
        alert(id)
      },
      demo() {
        for (var i = 0; i < 10000; i++) {
          console.log("#")
        }
        console.log("累坏了")
      }
    }
  })
</script>

9. 键盘事件

<body>
  <!-- 
        1.Vue中常用的按键别名
                回车 =>enter
                删除 =>delete（捕获"删除"和"退格"键）
                退出 =>esc
                换行 =>tab
                上   =>up
                下   =>down
                左   =>left
                右   =>right
        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意转化为kebad-case（短横线命名）
        3.系统修饰键（用法特殊）：crtl、alt、shift、meta（win键）
               （1）.配置keyup使用：按下修饰键的同事，再按下其他键，随后释放其他键，事件才触发
               （2）.配合keydown使用：正常触发事件

   -->
  <div id="root">
    <h1>你好，{{name}}</h1>

    <input type="text" placeholder="请按下提示输入" @keyup.enter="showInfo">
     
  </div>
</body>

<script type="text/javascript">
  const vm = new Vue({
    el: "#root",
    data: {
      name: "zhangsan"
    },
    methods: {
      showInfo(event) {
        alert("#")
      }, 
    }
  })
</script>

10. Demo实例（姓名拼接）

在这里插入图片描述

10.1插值法实现

<body>

  <div id="root">
    姓：<input type="text" v-model="firstName"> <br><br>
    名：<input type="text" v-model="lastName"> <br><br>
    全名：<span>{{firstName}} - {{lastName}}</span> <br><br>
    全名（展示前三个）：<span>{{firstName.slice(0,3)}} - {{lastName.slice(0,3)}}</span>
  </div>
</body>

<script type="text/javascript">
  const vm = new Vue({
    el: "#root",
    data: {
      firstName: "张",
      lastName: "三",

    }, 
  })
</script>

10.2method实现

<body>

  <div id="root">
    姓：<input type="text" v-model="firstName"> <br><br>
    名：<input type="text" v-model="lastName"> <br><br>
    全名：<span>{{fullName()}}</span> <br><br> 
  </div>
</body>

<script type="text/javascript">
  const vm = new Vue({
    el: "#root",
    data: {
      firstName: "张",
      lastName: "三",

    }, 
    methods:{
      fullName(){
        return this.firstName +"-" +this.lastName
      }
    }
  })
</script>

10.3计算属性

<body>
  <!-- 
        计算属性：
              1.定义：要用的属性不存在，要通过已有属性计算得来
              2.原理：底层借助了Object.definerproperty方法提供的getter|setter
              3.get函数什么时候执行？
                    （1）：初次读取时会执行一次
                    （2）：当依赖的数据发生变化时，会被再次调用
              4.优势：与method实现相比，内部有缓存机制（复用），效率高，调试方便
              5.备注：
                    （1）：计算属性最终会出现在vm上，直接读取使用即可
                    （2）：如果计算属性要被修改，那必须的写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
   -->
  <div id="root">
    姓：<input type="text" v-model="firstName"> <br><br>
    名：<input type="text" v-model="lastName"> <br><br>
    全名：<span>{{fullName}}</span> <br><br>
  </div>
</body>

<script type="text/javascript">
  const vm = new Vue({
    el: "#root",
    data: {
      firstName: "张",
      lastName: "三",

    },
    computed: {
      // fullName: {
      //   get() {
      //     return this.firstName + "-" + this.lastName
      //   },
      //   set(value) {

      //     console.log(value)
      //     const arr = value.split("-")
      //     this.firstName = arr[0]
      //     this.lastName = arr[1]
      //   }

      // }
      // 简写
      fullName() {
        return this.firstName + "-" + this.lastName
      }
    }
  })
</script>

astName: “三”,

},
computed: {
  // fullName: {
  //   get() {
  //     return this.firstName + "-" + this.lastName
  //   },
  //   set(value) {

  //     console.log(value)
  //     const arr = value.split("-")
  //     this.firstName = arr[0]
  //     this.lastName = arr[1]
  //   }

  // }
  // 简写
  fullName() {
    return this.firstName + "-" + this.lastName
  }
}

})

扫描公众号：回复8001亦可查看
在这里插入图片描述