vue初学

最新推荐文章于 2024-09-05 17:32:12 发布

要买苹果吗？

最新推荐文章于 2024-09-05 17:32:12 发布

阅读量95

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_48785525/article/details/109635975

vue 专栏收录该内容

8 篇文章

订阅专栏

Vue (读音 /vjuː/，类似于 view)
const 常量 let变量
{{message}}：mustache语法,不仅可以直接写变量，还可以写简单的表达式

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

<div id="app">
    <h2>{{message}}</h2>
    <h2>{{num * 2}}</h2>
    <h2>{{name}}{{message}}</h2>
    <h2>{{name+ ' '+ message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    //ler（变量）  const（变量）
    // 编程范式： 声明式编程
    const app = new Vue({
        el:'#app',// 用于挂载要管理的元素
        data:{ // 定义数据
            message: 'HelloWorld!',
            name: 'cy',
            num: 100
        }
    })
</script>

</body>
</html>

部分指令操作：
1.v-for
将数组中的元素遍历出来

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

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'Hello!',
            movies:['123', 'asd', 'abc', 'zxc']
        }
    })
</script>

2.v-html
将data中的元素用html解析

<div id="app">
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'HelloWorld!',
      url: '<a href="https://www.baidu.com">百度</a>'
    }
  })
</script>

vue实现一个简单的计数器

<div id="app">
  <h2>当前计数：{{counter}}</h2>
  <button v-on:click="counter++">+</button>
  <button v-on:click="counter--;">-</button>
  
  <!-- @符号，语法糖格式，等效于v-on: -->
  <!--<button @click="increment">+</button>
  <button @click="subtraction">-</button>-->
  
</div>

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

  const obj = {
    counter: 0
  };

  const app = new Vue({
    el: '#app',
    data: obj,
    methods: {
      increment: function () {
        //alert('increment会执行！');
        this.counter++
      },
      subtraction: function () {
        //alert('subtraction会执行！');
        this.counter--
      }
    }
  })
</script>