Vue语法学习

  1. 引入：script的src中导入vue包
  2. 创建：在script中创建vue对象
  3. 双向绑定：
  4. el----选择器，锁定标签
  5. data----定义变量，将标签内容绑定给变量
  6. {{变量}}----在标签中显示内容
  7. methods----绑定事件，控制变量内容。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

</head>

<body>

    <div  id="demo1">

        <div>{{msg}}</div>

        <button @click='fnChaMsg'>事件触发</button>

    </div>

    <!-- 引入vue 创建vue对象 双向绑定-->

    <script>

        var em = new Vue({

            el:'#demo1',

            data:{msg:'HI, Alice!'},

            methods:{

                fnChaMsg:function(){

                    this.msg = "Hello, alice!";

                }

            }

        })

    </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. 20165228 2017-2018-2 《Java程序设计》第4周学习总结
			
    20165228 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 子类与继承 子类的定义:使用关键词extends class 子类名 extends 父类名 ...
    
			
    2. 
						
  2. Hive错误：java.net.ConnectException: Connection refused: connect
			
    修改hive配置文件 hive-site.xml,加入如下配置项: <property> <name>hive.server2.thrift.port</name> ...
    
			
    3. 
						
  3. da shu mo ban
			
    #include<bits/stdc++.h> using namespace std; ;/*精度位数,自行调整*/ //1.如果需要控制输出位数的话,在str()里面把len调成需要的 ...
    
			
    4. 
						
  4. 【BZOJ2120】数颜色
			
    看代码学习好,好学好懂好ac 原题: 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中 ...
    
			
    5. 
						
  5. Vue.js系列之项目搭建
			
    项目搭建具体步骤如下: 1.安装node (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装cnpm镜像 (node自带安装了npm ...
    
			
    6. 
						
  6. SpringMVC(二)高级
			
    高级参数绑定 1.1. 绑定数组 1.1.1. 需求 在商品列表页面选中多个商品,然后删除. 1.1.2. 需求分析 功能要求商品列表页面中的每个商品前有一个checkbok,选中多个商品后点击删除按 ...
    
			
    7. 
						
  7. day 57 jQuery的补充
			
    .data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值. .data(key, value): 描述:在匹配的元素上存储任意相关数据. ...
    
			
    8. 
						
  8. gearman  kubernetes 运行
			
    备注: 使用的是golang 版本的实现,同时官方也提供了一个k8s 的helm 部署charts,我 没有使用这个helm,而是通过kompose 这个工具直接转换的 docker-compose  ...
    
			
    9. 
						
  9. lamp安装总结
			
    1.安装准备   建一个目录用于存放各软件包的压缩文件, 如我把我的源码文件都放在了 /software目录下 切换到/software目录下,执行 wget http://dev.mysql.com ...
    
			
    10. 
						
  10. haproxy（单机）+mysql集群负载均衡
			
    HAProxy是 七层代理 ,在使甠HAProxy后,在MySQL上 看不到Apps的源IP地址 ,看到的是HAProxy地址,而 MySQL的权限访问设置是和IP地址有关 ,这样就导致了MySQL无 ...
    
			
    11.