vue初学

最新推荐文章于 2022-07-25 19:45:10 发布

要买苹果吗？

最新推荐文章于 2022-07-25 19:45:10 发布

阅读量76

点赞数 1

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

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

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

要买苹果吗？

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue初学

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"
复制链接

扫一扫

专栏目录