使用"{{ }}"来插入文本

    使用v-html来插入html元素

    v-bind给元素绑定属性，例如下面的，将title属性指定为data.title相同的值。v-bind指令后面的属性可以是任意值

    支持完整的js表达式，在{{}}中写

    vue的指令以v-打头

    v-on用于绑定事件，例如click，submit

    v-model实现数据双向绑定

    用管道符|作为过滤器，第一个参数，作为第二个参数（过滤函数），的参数。过滤器函数放在vue的filters当中

    缩写：<a v-bind:href="url"> => <a :href="url"> <br><a v-on:click="doSomething"> => <a @click="doSomething">



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Vue 学习</title>

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

</head>

<body>

<div id="app">

  <p>{{ message }}</p><br>

  <div v-html="html"></div><br>

  <div v-bind:title="title">v-bind给元素绑定属性</div><br>

  {{1+1}}<br>

  {{message.split('').reverse().join('')}}<br>

  <div v-bind:id="html + id"></div><br>

  <div v-if="seen">seen的值为true，则显示该标签</div><br>

  <div ><a v-on:click="aclick()" href="#">点击我</a></div><br>

  <div ><input v-model="message"></div><br>

  <div >过滤器：{{ message | reverser}}</div><br>

</div>

<script>

    var data = { message: 'hello, vue!', html: '<h1>你好！</h1>', title:'div-title', id:100, seen:false }

    var app = new Vue({

      el: '#app',

      data: data,

      methods: {

          print_message: function(){

              return this.message;

          },

          aclick: function(){

              alert('you click me!')

          }

      },

      filters: {

              reverser: function(str){

                  if ( str === '') return '';

                  return str.split('').reverse().join('')

              }

          }

    });

</script>

</body>

</html>


												


											
vue基本语法的更多相关文章
	

    
						
  1. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
		
    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
    
		
    2. 
						
  2. idea 添加 VUE 的语法支持和开发
		
    <一>VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting ...
    
		
    3. 
						
  3. 2-5 vue基础语法
		
    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
    
		
    4. 
						
  4. Vue常用语法及命令
		
    1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...
    
		
    5. 
						
  5. Vue模板语法(二)
		
    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...
    
		
    6. 
						
  6. Vue模板语法(一)
		
    Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...
    
		
    7. 
						
  7. idea 添加 VUE 的语法
		
    1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting -> Edit -> Inspections -> html 3.加入以下:  ...
    
		
    8. 
						
  8. Vue模板语法（一）
		
    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
    
		
    9. 
						
  9. 一、vue基础--语法
		
      用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...
    
		
    10. 
						
  10. 一、vue基础语法（轻松入门vue）
		
    轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. jQuery on()方法使用
			
    jQuery on()方法 基本语法: 语法结构一: $(selector).on(event,function) 语法结构二: $(selector).on(events,[selector],[d ...
    
			
    2. 
						
  2. 自己定义ViewGroup实现仿淘宝的商品详情页
			
    近期公司在新版本号上有一个须要. 要在首页加入一个滑动效果, 详细就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 例如以下图 X东的商品详情页,假设用户继续向上拉的话就进入商品图文描写叙述 ...
    
			
    3. 
						
  3. 【转】ASP.NET中验证控件的使用
			
    前言: 前几日,无奈用JS判断控件的有效性,发现的确是一件费力.费神的事情!特别是针对邮件格式.邮政编码等的关于正则表达式的JS验证(其中涉及正则表达式的比较等,较烦~).其实对于这些常用的控件有效性 ...
    
			
    4. 
						
  4. 评分模型的检验方法和标准&信用评分及实现
			
    评分模型的检验方法和标准通常有:K-S指标.交换曲线.AR值.Gini数等.例如,K-S指标是用来衡量验证结果是否优于期望值,具体标准为:如果K-S大于40%,模型具有较好的预测功能,发展的模型具有成 ...
    
			
    5. 
						
  5. 单片机成长之路（51基础篇） - 012 MCS－51单片机控制详解–TMOD T2MOD
			
    TMOD:工作方式控制寄存器 寄存器地址89H,不可位寻址. 位序 B7 B6 B5 B4 B3 B2 B1 B0 位符号 GATE C/T M1 M0 GATE C/T M1 M0 GATE——门控 ...
    
			
    6. 
						
  6. 物联网架构成长之路(27)-Docker练习之Zookeeper安装
			
    0. 前言 准备了解一下消息队列MQ,对比了一些开源的中间件,最后选择Kafka作为以后用到的消息队列,消息队列的应用场景及Kafka与其他消息队列的优缺点这里就不细说了,具体的可以参考其他博客说明. ...
    
			
    7. 
						
  7. make -j8以及linux下查看cpu的核数
			
    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo|  ...
    
			
    8. 
						
  8. Oracle中判断字段是否为数字
			
    在我们平常的开发中可能会遇到这样的问题,就是判断某一列是否全部由数字组成,我们都知道oracle并没有给我们提供这样一个现成的函数,那么根据我的经验我总结了两个行之有效的方法(列名:column,表名 ...
    
			
    9. 
						
  9. redis的事务不是原子性
			
    Reference: https://blog.csdn.net/u011692780/article/details/81213010 一.事务的四大特性 关系型数据库的事务具有四个特性: 1. 原 ...
    
			
    10. 
						
  10. sqoop 测试 --hive-delims-replacement 参数
			
    在hive的官方文档中给的例子中字段分隔符是\001,但是在他的API文档中--hive-delims-replacement ,--hive-drop-import-delims   参数中会处理的 ...
    
			
    11.