vue笔记（coderwhy）

最新推荐文章于 2023-04-28 23:15:10 发布

CalvadosAsheng

最新推荐文章于 2023-04-28 23:15:10 发布

阅读量1.6k

点赞数 3

分类专栏：前端学习笔记文章标签： vue.js es6

本文链接：https://blog.csdn.net/weixin_43200099/article/details/115473638

版权

Vue、Vuejs学习笔记Vue初体验hello VueVue列表展示（v-for)计数器（v-on:click /@click)Vue中的MVVMVue的options选项Vue的生命周期Vue初体验hello Vue<body>  <div id="app">{{message}}</div> <script src="../js/vue.js"></script>

摘要由CSDN通过智能技术生成

Vue初体验

hello Vue

<body>
    <!-- 界面与数据分离 -->
    <div id="app">{
   {
   message}}</div>
    <script src="../js/vue.js"></script>
    <script>
        //声明式编程（曾经是命令式编程）
        const app = new Vue({
   
            el: '#app',//挂载要管理的元素
            data: {
   
                message: '你好啊！'//更改message后自动改，不需要操纵界面，响应式
            }
        })
    </script>
</body>

在这里插入图片描述

Vue列表展示（v-for)

是响应式的~！

 <div id="id">
        <ul>
            <li v-for="item in movies">{
   {
   item}}</li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
   
            el: '#id',
            data: {
   
                message: '你好呀',
                movies: ['海王', '钢铁侠', '美国队长', '绿巨人'],
            }
        })
    </script>

在这里插入图片描述

计数器（v-on:click /@click)

<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub">-</button>
            <!-- <button v-on:click="num--;">-</button> -->
            <span>{
   {
   num}}</span>
            <button @click="add">+</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
   
            el: '#app',
            data: {
   
                num: 1
            },
            methods: {
   
                add: function () {
   
                    if (this.num < 10) {
   
                        this.num++;
                    }
                },
                sub: function () {
   
                    if (this.num > 1) {
   
                        this.num--;
                    }
                }
            }
        })
    </script>
</body>

Vue中的MVVM

在这里插入图片描述

Vue的options选项

在这里插入图片描述

Vue的生命周期

见官方文档和图片

Vue插值操作

Mustache语法 { {}}
可以直接在里面进行字符串的拼接，简单的运输：
在这里插入图片描述

v-once

可以固定数据直接写在标签后面也不需要跟任何东西

v-html和v-text

以html来解析这个字符串格式：v-html=“xxx”
v-text可以替代{ {}}但是不够灵活，会把标签内的内容覆盖掉（少用）
如：
在这里插入图片描述

其他指令：v-pre 就不会解析标签里的任何内容,{ {}}就不会被解析直接显示出来
v-cloak 意思就是在没有渲染出来前先设置一个v-cloak(写到style里display:none)当解析出来后会自动移除掉。

v-bind

作用：动态绑定属性
一般链接图片都是从服务器请求来的，要不断改变。
缩写 :
属性不能用Mustache语法
在这里插入图片描述
还可以绑定这样的（一个判断的语句）：books是一个对象组成的数组

注意绑定class:
在这里插入图片描述

    .active {
   
      color: red;
    }

    .line {
   
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div id="app">
    <h2 :class="{active:isActive,line:isLine}">你好呀</h2>
    <button @click="btnClick">按钮</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
   
      el: '#app',
      data: {
   
        isActive: true,
        isLine: false,
      },
      methods: {
   
        btnClick: function () {
   
          this.isActive = !this.isActive
        }
      }
    })

绑定数组：
在这里插入图片描述

计算属性

它的本质是属性，不需要加小括号，写在computed里面

  <div id="app">
    <h2>{
   {
   fullName}}</h2>
  </div>
</head>

<body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
   
      el: '#app',
      data: {
   
        firstName: 'Hu',
        lastName: 'peiyao',
      },
      //计算属性，要把它看作是属性，在{
   {}}里面不需要加（）
      computed: {
   
        fullName: function () {
   
          return this.firstName + ' ' + this.lastName
        }
      }
    })
  </script>

set和get方法

set方法是不常用的

  <div id="app">
    <h2>{
   {
   fullName}}</h2>
  </div>
</head>

<body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
   
      el: '#app',
      data: {
   
        firstName: 'Hu',
        lastName: 'peiyao',
      },
      //计算属性，要把它看作是属性，在{
   {}}里面不需要加（）
      computed: {
   
        // fullName: function () {
   
        //   return this.firstName + ' ' + this.lastName
        //计算属性其实是有两种方法set get但一般是不用set方法，是只读属性
        fullName: {
   
          set: function (newName) {
   
            console.log('-----', newName);
            const names = newName.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
          },
          get: function () {
   
            return this.firstName + ' ' + this.lastName;
          }
        }
      }
    }
    )
  </script>

methods和计算属性的对比

计算属性是会被缓存起来的，当我们有多个计算属性要展示但它的内容没有变化时，只会调用一次，效率更高
在这里插入图片描述

v-on

写法糖 @
参数的使用：
1.如果不需要传参，那么在事件定义时，写方法有没有小括号都无所谓。
2.当需要传参，就正常写小括号传参
3.如果省略了小括号，但是方法本身是需要一个参数的，那么默认会把浏览器产生的event事件对象作为参数传给方法

   <button @click="btn1Click">按钮1</button>

  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
   
      el: '#app',
      methods: {
   
        btn1Click(abc) {
   
          console.log(abc);
        }
      }
    })

在这里插入图片描述

4.当我们需要event对象又需要别的参数：
一般来说我们省略就传递了event，但这里我们用$event来传递（不能直接写event，不然它就是个没有定义的变量）
如果123用变量代替了则需要在data里定义这个变量；

  <div id="app">
    <!-- <button @click="btn1Click()">按钮1</button> -->
    <button @click="btn1Click(123,$event)">按钮1</button>

  </div>
  <script src="../js/

最低0.47元/天解锁文章

CalvadosAsheng

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
vue笔记（coderwhy）

Vue、Vuejs学习笔记Vue初体验hello VueVue列表展示（v-for)计数器（v-on:click /@click)Vue中的MVVMVue的options选项Vue的生命周期Vue初体验hello Vue<body>  <div id="app">{{message}}</div> <script src="../js/vue.js"></script>
复制链接

扫一扫