Vue语法

最新推荐文章于 2022-09-26 16:57:08 发布

丑阳璐

最新推荐文章于 2022-09-26 16:57:08 发布

阅读量44

点赞数

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

本文链接：https://blog.csdn.net/weixin_52735772/article/details/119270370

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue语法(basement)

上次通过html页面已经实现了第一个Vue程序，所有的东西都是响应式的，页面实现了实时更新。

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!--vue层变成了模板 template-->
<div id="a">
    <span v-bind:title="message">
        鼠标悬停时查看动态绑定信息！
    </span>
</div>
<!--2.创建vue的对象-->
<script>

    var vm = new Vue({
        el:"#a", //通过#id的方式获取元素
        //Model：数据
        data:{ //data是一个对象
            message:"hello,vue!"
        }
    });
</script>
</body>
</html>

前缀为v-的指令，以表示它们是vue提供的特殊属性，他们会在渲染DOM上应用特殊的响应式行为

可以在打开浏览器后输入a.message=“消息改变了”，就会发现此时页面已经更新。

v-if,v-else,v-else-if

<div id="a">
  <h1 v-if="type === 'A'">A</h1>
  <h1 v-else-if="type === 'B'">B</h1>
  <h1 v-else>C</h1>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: "#a",
    data: {
      type: 'A'
    }
  });
</script>

for

<div id="a">
  <li v-for="(ar,index) in arr">
    {{ar.message}}--{{index}}
  </li>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: "#a",
    data: {
      arr:[
        {message: 'java'},
        {message: 'mysql'},
        {message: 'linux'}
      ]
    }
  });
</script>

event(methods)

v-on

<div id="a">
  <button v-on:click="sayHi()">click it</button>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: "#a",
    data: {
      message: "hello vue !",
    },
    methods: {//方法必须定义在vue的methods对象中，v-on:事件绑定
      sayHi: function () {
        alert(this.message);
      }
    }
  });
</script>

丑阳璐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue语法

Vue语法(basement)上次通过html页面已经实现了第一个Vue程序，所有的东西都是响应式的，页面实现了实时更新。v-bind<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.j
复制链接

扫一扫