00-Vue初体验

最新推荐文章于 2022-07-05 02:20:29 发布

无味无感

最新推荐文章于 2022-07-05 02:20:29 发布

阅读量95

点赞数

分类专栏： VueJs

本文链接：https://blog.csdn.net/qq_41863998/article/details/117668638

版权

VueJs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue初体验

体验Vue的响应式（数据发生改变，页面会自动跟着改变）

我们做了什么事情

在阅读JavaScript代码是，会发现创建了一个Vue对象。
创建Vue对象的时候，传入了一些options:{}
- 1.{}中包含了el属性：该属性指定Vue对象挂载到哪一个元素上，这里是挂载到id为app的元素上的。
- 2.{}中包含了data属性：该属性通常是用来存储数据的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>

<script type="application/javascript" src="../js/vue.js"></script>
<script>
    //知识点:let(变量:可以从新赋值) const(常量:不可更改)
    //这种编程方式叫：声明式编程
    const app = new Vue({
        el:'#app', //用于挂载我要管里的元素
        data:{ //定义数据
            message:'你好！Vuejs' //为什么可以html页面可以那到数据，因为vue在解析页面的时候发现有第一的变量语法，然后会在引用的js中寻找次变量
        }
    })
    
    //jquery、js(命令式编程)
</script>
</body>
</html>

Vue列表展示

for基本使用，再也不用像JavaScript去操作DOM元素
而且是响应式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <p>{{message}}</p>
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script>
    const app=new Vue ({
        el: '#app',
        data: {
            message: "张三爱李白",
            movies:['海贼王','星际穿越','大话西游']
        },
    })
</script>
</body>
</html>

在这里插入图片描述

Vue计数器案例

Vue快速绑定点击事件：v-on:click (语法糖：@click)
新认识的Vue属性：methods,它是用来定义方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$Title$</title>
</head>
<body>
<div id="app">
  <h1>当前计算：{{counter}}</h1>
<!--  <button v-on:click="counter++">+</button>-->
<!--  <button v-on:click="counter&#45;&#45;">-</button>-->

<!--  <button v-on:clock="addition()">+</button>-->
<!--  <button v-on:click="subtraction()">-</button>-->
<!--  Vue语法糖:给元素绑定点击事件简写@click-->
  <button @click="addition">+</button>
  <button @click="subtraction">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue ({
    el:'#app',
    data:{
      message:'test',
      counter:0
    },
    methods:{
      addition:function (){
        console.log('加法被执行!');
        this.counter++;
      },
      subtraction:function ()
      {
        console.log('减法被执行!');
        this.counter--;
      }
    }
  });
</script>
</body>
</html>