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

    使用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. mac下安装xampp、及其之上的组件安装
			
    由于mac下开发需要用到php7,这里是用的xampp集成开发版本.但是mac下安装xampp失败,失败信息如下: Error starting "XAMPP" stack: fa ...
    
			
    2. 
						
  2. Jenkins持续集成 入门实践
			
    本文测试环境: ASP.NET MVC项目,Windows 7环境,SVN代码仓库, MSBuild,TortoiseSVN 持续集成这种工具很多了,Jenkins比较常用,他的原理就是一个服务,有一 ...
    
			
    3. 
						
  3. Shell脚本编程（三）：shell参数传递
			
    我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 实例 以下实例我们向脚本传递三 ...
    
			
    4. 
						
  4. SQL获取当前时间月份为两位数
			
    --获取当前时间月份为两位数 )),) --获取当前时间上月月份为两位数 , )),)
    
			
    5. 
						
  5. Python 词典增加和删除
			
    增加 dict 里面的属性,必须先初始化 key,然后使用 append 添加值 #!/usr/bin/python3 message = dict() #message = { # "10 ...
    
			
    6. 
						
  6. Linux常用的基础组件
			
    Linux服务器(新机器) yum install gcc gcc-c++ glibc-devel make ncurses-devel openssl-devel autoconf git yum  ...
    
			
    7. 
						
  7. hdoj：2085
			
    核反应堆 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
    
			
    8. 
						
  8. node踩坑之This is probably not a problem with npm. There is likely additional logging output above.错误
			
    可能由于种种版本更新的原因需要执行 npm install重新安装一次,如果还是不可以的话,在把之前装的都清空 rm -rf node_modulesrm package-lock.jsonnpm c ...
    
			
    9. 
						
  9. VirtualBox通过Host-Only网络连接方式实现宿主机与虚拟机通信
			
    适用情况 (1)没有联网, 不插网线 (2)宿主机直接连接宽带(无路由器) 情景: 宿主机 Windows 7 虚拟机 Windows XP 虚拟机安装了SQLServer2005,宿主机想连接使用虚 ...
    
			
    10. 
						
  10. 居于U2000手机管理光猫，小区运营商FTTH光猫注册神器，MA5680T手机管理，自动添加光猫
			
    此软件居于U2000开发,需要U2000管理支持 主要功能: 光猫查看->上线情况.下线原因.下线时间.光猫重启.光模块发送功能.接收功能.温度 Radius诊断->用户基本信息.拨打电话 ...
    
			
    11.