<!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>

Vue.js基础知识的更多相关文章

  1. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

  2. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  3. vue.js基础知识篇(5):过渡、Method和Vue实例方法

    第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...

  4. vue.js基础知识篇(4):过滤器、class与style的绑定2

    代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...

  5. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  6. vue.js基础知识篇(2):指令详解

    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

  7. vue.js基础知识篇(1):简介、数据绑定

    目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...

  8. 简单易懂的 Vue.js 基础知识 ！

    根 vue 实例 let viewModel = new Vue({ // 包含数据.模板.挂载元素.方法.生命周期钩子等选项 }) Hello Wrold  <!-- 这是我们的 View - ...

  9. Vue.js 基础知识

    0. Vue.js 是轻量级的MVVM框架: 1. index.html:<app></app>:组件载入:入口文件会默认调用一个 main.js: 2. App.vue:入口 ...

随机推荐

  1. springboot将项目打成war包

    1. 将项目的打包方式改为war包 <groupId>com.cc</groupId> <artifactId>aaaaaa</artifactId> ...

  2. flask第二十六篇——模板【控制语句】【2】

    如果你也在学flask,就请加船长的公众号:自动化测试实战 我们先补充一下for循环的知识,我们之前说过,flask是由Jinja2+sqlAlchemy+werkzeug组成的,我们现在学的控制语句 ...

  3. 02 - Unit03：注册功能实现

    注册功能实现 发送Ajax请求 服务器处理 Ajax回调处理 发送Ajax请求 绑定事件: "注册"按钮的单击事件 获取参数: 用户名/密码/昵称 请求地址: /user/regi ...

  4. java web Servlet开发(二)

    一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...

  5. 手淘flexible.js框架使用和源代码讲解

    手淘框架是一个用来适配移动端的js框架,下面我们来讲解一下如何使用手淘的这套框架. 其实手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size,然后所有的距离大小 ...

  6. postman 获取时间戳的方法 和md5加密的方法

    获取时间戳方法: postman.setGlobalVariable("timestamp",Math.round(new Date().getTime()));   这整句是获取 ...

  7. bom知识点

    1.BOM输出 所谓BOM指的是浏览器对象模型 Browser Object Model,它的核心就是浏览器 alert(1);//弹出框 调式使用 console.log('路飞学城');//用于浏 ...

  8. Linux下安装MATLAB

    Why do I see "Preparing installation files ... Installing ... Finished..." in the terminal ...

  9. Requests抓取火车票数据

    1.数据接口 https://kyfw.12306.cn/otn/lcxxcx/query?purpose_codes=ADULT&queryDate=2016-08-01&from_ ...

  10. js格式化时间 js格式化时间戳

    一个js格式化时间和js格式化时间戳的例子. 代码:/** * 时间对象的格式化; */Date.prototype.format = function(format) { /* * eg:forma ...