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

    使用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. Python String Formatting Best Practices
			
    https://imliyan.com/blogs/article/Python3.6%E6%96%B0%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%A0%BC%E5 ...
    
			
    2. 
						
  2. fiddle扩展
			
    扩展地址:http://www.telerik.com/fiddler/add-ons 证书选择 ios设置证书生成 (CertMaker for iOS and Android) 证书查看 (Fid ...
    
			
    3. 
						
  3. kafka创建topic异常
			
    问题描述: kafak运行在weblogic账户下,jdk1.8,当在root账户下创建topic(当前账户下的jdk1.6)导致创建topic失败 ./bin/kafka-topics.sh --c ...
    
			
    4. 
						
  4. 用交叉验证改善模型的预测表现－着重k重交叉验证
			
    机器学习技术在应用之前使用“训练+检验”的模式(通常被称作”交叉验证“). 预测模型为何无法保持稳定? 让我们通过以下几幅图来理解这个问题: 此处我们试图找到尺寸(size)和价格(price)的关系 ...
    
			
    5. 
						
  5. 【翻译】Nginx的反向代理
			
    本文为翻译文,原文地址:https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/ 本文描述代理服务器的基本配置.你能学到如何 ...
    
			
    6. 
						
  6. Docker指令
			
    将showdoc容器下的/var/www 拷贝到主机 /home/bonker/showdocTsp1.214下 docker cp showdoc:/var/www /home/bonker/sho ...
    
			
    7. 
						
  7. kernel事件通知userspace
			
    https://stackoverflow.com/questions/31646466/how-to-send-signal-from-kernel-to-user-space
    
			
    8. 
						
  8. JVM：Java常见内存溢出异常分析
			
    转载自:http://www.importnew.com/14604.html Java虚拟机规范规定JVM的内存分为了好几块,比如堆,栈,程序计数器,方法区等,而Hotspot jvm的实现中,将堆 ...
    
			
    9. 
						
  9. Spark性能优化指南——基础篇
			
    本文转自:http://tech.meituan.com/spark-tuning-basic.html 感谢原作者 前言 在大数据计算领域,Spark已经成为了越来越流行.越来越受欢迎的计算平台之一 ...
    
			
    10. 
						
  10. MySQL: Set user variable from result of query
			
    set @user = 123456;set @group = (select GROUP from USER where User = @user);select * from USER where ...
    
			
    11.