Vue3学习（day1）

最新推荐文章于 2024-07-08 21:35:13 发布

m0_75080476

最新推荐文章于 2024-07-08 21:35:13 发布

阅读量91

点赞数 3

文章标签：学习 vue.js 前端

本文链接：https://blog.csdn.net/m0_75080476/article/details/137718345

版权

1.创建Vue3实例

 <script>
    
  const app=Vue.createApp({
    /*选项*/
     
  })
  //挂载点
  const vm=Vue.createApp().mount("#app")
  </script>

2.实例化Vue数据和方法

vm.$data.num：输出 Vue 实例 vm 的 $data 对象中 num 属性的值

vm.num：直接通过 vm.num 访问 num 属性的值

这两行都是在测试Vue实例vm是否被正式创建，num是否和预期一样都是10（注意这两行代码都应该放到实例创建完后执行，不然会报错undefine）

  <div id="app11">
    {{num}}
  </div>

  <script>
const app11={
   data(){
    return{
      num:10
    }
   }
}
const vm=Vue.createApp(app11).mount("#app11")
console.log("vm.$data.num:"+vm.$data.num)
console.log("vm.num:"+vm.num);

案例（创建按钮加一）

  <div id="app">
    <p>{{num}}</p>
    <button @click="add">加1</button>
  </div>

  <script>
 const app={
  data(){
    return{
      num:10
    }
  },
methods:{
  add(){
   this.num++
   console.log(vm.num);
  }
}
 }
 const vm=Vue.createApp(app).mount("#app")
  </script>

3.计算属性和侦听属性

<div id="app">
    <p>单价{{price}}</p>
    <p>数量{{num}}</p>
    <p>通过msum方法求总价{{msum()}}</p>
    <p>通过csum计算属性求总价{{csum}}</p>

  </div>

  <script>
 const app={
  data(){
    return{
      price:150,
      num:12,
      discount:1
    }
  },
  methods:{
    msum(){
      return this.price*this.num*this.discount
    }
  },
  computed:{
    csum(){
      return this.price*this.num
    }
  }
 }
 const vm=Vue.createApp(app).mount("#app")
  </script>

侦听属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../../vue.js"></script>
<body>
  <div id="app">
    <p>单价{{price}}</p>
    <p>数量{{num}}</p>
    <p>总价{{price*num}}</p>
 

  </div>

  <script>

//侦听属性
const app={
  data(){
    return{
      price:50,
      num:3
    }
  },
  watch:{
    price:function(newValue,oldValue){
        this.price=newValue
        alert("原价"+oldValue+"新价"+newValue)
    }
  }
}
const vm=Vue.createApp(app).mount("#app")
  </script>
</body>
</html>

Vue中计算属性和侦听属性都可以侦听数据的变化。但是计算属性只对依赖的数据的变化进行操作，必须返回一个数据，而侦听属性不局限于这个可以是数据可以是操作（侧重于执行响应的操作）

4.事件

监听和处理

  <div id="app">
<p>{{count}}</p>
<button v-on:click="count--">减一</button>
<button v-on:click="add()">加一</button>
  </div>

  <script>
const app={
  data(){
    return{
    count:0
    }
  },
  methods:{
    add(){
     return this.count++
    }
  }
}
const vm=Vue.createApp(app).mount("#app")
  </script>

事件修饰符（只有@click.prevent）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
</head>
<body>
  <div id="app">
    <a href="https://love.qq.com/web202106/news.html">单击1，打开官网</a><br>
    <a href="https://love.qq.com/web202106/news.html" @click.prevent>单击2，阻止默认行为</a>
  </div>

  <script>
    const app={

    }
    const vm=Vue.createApp(app).mount("#app")
  </script>
</body>
</html>

5.按键修饰符

v-on或者@在监听键盘事件时添加按键修饰符

m0_75080476

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3学习（day1）

Vue中计算属性和侦听属性都可以侦听数据的变化。但是计算属性只对依赖的数据的变化进行操作，必须返回一个数据，而侦听属性不局限于这个可以是数据可以是操作（侧重于执行响应的操作）这两行都是在测试Vue实例vm是否被正式创建，num是否和预期一样都是10（注意这两行代码都应该放到实例创建完后执行，不然会报错undefine）vm.$data.num：输出 Vue 实例。事件修饰符（只有@click.prevent）v-on或者@在监听键盘事件时添加按键修饰符。2.实例化Vue数据和方法。3.计算属性和侦听属性。
复制链接

扫一扫