vue 学习笔记 day01

最新推荐文章于 2024-06-03 10:16:59 发布

武庸

最新推荐文章于 2024-06-03 10:16:59 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 vue

本文链接：https://blog.csdn.net/qq_24146957/article/details/97139136

vue 同时被 2 个专栏收录

1 篇文章

订阅专栏

前端

0 篇文章

订阅专栏

本文介绍Vue.js的基础用法，包括如何使用Vue绑定数据、列表渲染、事件处理等基本概念，并通过实例展示了计数器组件的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue day01

显示某个变量

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">{{message}}</div>
</body>
<script>
    //let或者const声明一个变量，以前var
    //编程范式：声明式编程
    const app = new Vue({
        el:'#app', //用于挂载要管理的数据
        data:{ //定义数据
            message:'hi好，世界！'
        }
    })
    /*
    元素js的做法（编程范式：命令式编程）
    1.创建div元素
    2.定义一个变量message
    3.将message变量放在前面的div元素显示
     */
</script>
</html>

打开浏览器的控制台

输入app.message=“one”，页面显示改变了

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <div>{{movies}}</div>
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
</body>
<script>
    //let或者const声明一个变量，以前var
    //编程范式：声明式编程
    const app = new Vue({
        el:'#app', //用于挂载要管理的数据
        data:{ //定义数据
            message:'hi好，世界！',
            movies:['火影','海贼王','柯南']
        }
    })
    /*
    元素js的做法（编程范式：命令式编程）
    1.创建div元素
    2.定义一个变量message
    3.将message变量放在前面的div元素显示
     */
</script>
</html>

案例：计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2>{{counter}}</h2>
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
        //语法糖写法
        <button @click="add">+</button>
        <button @click="sub">-</button>
    </div>
</body>
<script>
    //
    const app = new Vue({
        el:'#app', //用于挂载要管理的数据
        data:{ //定义数据
            counter:0
        },
        methods:{
            add: function () {
                console.log("add被执行")
                this.counter++
            },
            sub: function () {
                console.log("sub被执行")
                this.counter--
            }
        }
    })

</script>
</html>

MVVM

$[外链图片转存失败(img-ZEpOscDL-1563958137257)(E:\items\studyVue\1563863744451.png)]$

proxy

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2>{{counter}}</h2>
        <button @click="add">+</button>
        <button @click="sub">-</button>
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>
</body>
<script>
    //proxy
    const ojb ={
        counter: 0
    }
    const app = new Vue({
        el:'#app', //用于挂载要管理的数据
        data:ojb,
        methods:{
            add: function () {
                console.log("add被执行")
                this.counter++
            },
            sub: function () {
                console.log("sub被执行")
                this.counter--
            }
        }
    })

</script>
</html>

$[外链图片转存失败(img-NFGP4DfY-1563958137258)(E:\items\studyVue\1563864088102.png)]$

vue 生命周期

<div id="app">
   {{message}}
 </div>
 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el:'#app',
     data:{
       message:'hi好，世界！'
     },
     methods:{
       
     },
     created: function () {
       console.log("created")
     },
     mounted:function () {
       console.log("mounted")
     }
   })
 </script>

$[外链图片转存失败(img-NaMEtdNj-1563958137259)(E:\items\studyVue\1563957486341.png)]$

钩子函数

$[外链图片转存失败(img-MrF9CvpJ-1563958137259)(E:\items\studyVue\1563957551930.png)]$

mustache语法

<div id="app">
  <h2>we are dog {{message}}</h2>
  <h2>{{firstName+' '+lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter*2-1}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'hi好，世界！',
      firstName:'Knuth',
      lastName:'John',
      counter:100
    }
  })
</script>