Vue.js基础知识

时间：2023-10-01 09:00:37
<!DOCTYPE html>

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>

  <meta charset="UTF-8">

  <title>02_模板语法</title>

</head>

<body>

<!--

  1. 引入Vue.js

  2. 创建Vue对象

    el : 指定根element(选择器)

    data : 初始化数据(页面可以访问)

  3. 双向数据绑定 : v-model

  4. 显示数据 : {{xxx}}

  5. 理解vue的mvvm实现

-->

<!--

1. 模板的理解:

  动态的html页面

  包含了一些JS语法代码

    大括号表达式

    指令(以v-开头的自定义标签属性)

2. 双大括号表达式

  语法: {{exp}} 或 {{{exp}}}

  功能: 向页面输出数据

  可以调用对象的方法

3. 指令一: 强制数据绑定

  功能: 指定变化的属性值

  完整写法:

    v-bind:xxx='yyy'  //yyy会作为表达式解析执行

  简洁写法:

    :xxx='yyy'

4. 指令二: 绑定事件监听

  功能: 绑定指定事件名的回调函数

  完整写法:

    v-on:click='xxx'

  简洁写法:

    @click='xxx'

-->

<div id="app">

  <h2>1. 双大括号表达式</h2>

  <p>{{msg}}</p>

  <p>{{msg.toUpperCase()}}</p>

  <p v-text="msg"></p>

  <p v-html="msg"></p>

  <h2>2. 指令一: 强制数据绑定</h2>

  <img v-bind:src="data:imageUrl"/>

  <img src="data:imageUrl"/>

  <img :src="data:imageUrl"/>

  <h2>3. 指令二: 绑定事件监听</h2>

  <button v-on:click="fn">fn</button>

  <button @click="fn01('fn01')">fn01</button>

</div>

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript">

  new Vue({

      el: "#app",

      data: {

          msg: "<h1>hello world</h1>",

          imageUrl: "http://i1.umei.cc/uploads/tu/201809/9999/rn5a77833592.jpg"

      },

      methods: {

          fn(){

              alert("hello fn");

          },

          fn01(n){

              alert(n)

          }

      }

  })

</script>

</body>

</html>

相关文章