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. idea 添加 VUE 的语法支持和开发

    <一>VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting ...

  3. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  4. Vue常用语法及命令

    1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...

  5. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  6. Vue模板语法(一)

    Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...

  7. idea 添加 VUE 的语法

    1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting -> Edit -> Inspections -> html 3.加入以下: ...

  8. Vue模板语法(一)

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  9. 一、vue基础--语法

      用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...

  10. 一、vue基础语法(轻松入门vue)

    轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...

随机推荐

  1. jQuery的事件

    事件冒泡处理 使用event.stopPropagation();阻止事件冒泡 冒泡事件也可以使用return false来处理 并且 <script type="text/javas ...

  2. 搜索入门_简单搜索bfs dfs大杂烩

    dfs题大杂烩 棋盘问题  POJ - 1321 和经典的八皇后问题一样.  给你一个棋盘,只有#区域可以放棋子,同时同一行和同一列只能有一个棋子. 问你放k个棋子有多少种方案. 很明显,这是搜索题. ...

  3. 使用apidoc 生成Restful web Api文档——新手问题与解决方法

    使用apidoc工具来给项目做接口文档,不仅有合理的源码注释,还可以生成对应的文档.是给源码写备注的一个极佳实践. 工具名称:apiDoc Git地址:https://github.com/apido ...

  4. 如何上传本地项目到github

    github作为git的代码托管,而许多大神都在上面托管自己的开源项目.现在,我来记录一下我是如何将本地项目上传到github上. 一.安装git工具(具体方法见百度) 二.配置全局 三.创建.ssh ...

  5. 20155219实验四 Android开发基础设计实验报告

    20155219实验四 Android开发基础设计实验报告 实验内容 安装Andriod Studio并配置软件 使用Andriod Studio软件实现Hello World!+学号的小程序 实验步 ...

  6. Codeforces483B. Friends and Presents(二分+容斥原理)

    题目链接:传送门 题目: B. Friends and Presents time limit per test second memory limit per test megabytes inpu ...

  7. 洛谷P1415 拆分数列(dp)

    题目链接:传送门 题目: 题目背景 [为了响应党中央勤节俭.反铺张的精神,题目背景描述故事部分略去^-^] 题目描述 给出一列数字,需要你添加任意多个逗号将其拆成若干个严格递增的数.如果有多组解,则输 ...

  8. 安装,配置,启动FTP,SSH,NFS服务

    1.安装,配置,启动FTP服务 sudo apt-get install vsftpd 修改vsftpd的配置文件/etx/vsftpd/.config,将下面几行前面的“#”去掉 #local_en ...

  9. 收集的dubbo博客

    1.http://shiyanjun.cn/archives/category/opensource/dubbo 2.https://blog.csdn.net/hellozpc/article/de ...

  10. What are long running processes?

    转自:https://blog.bernd-ruecker.com/what-are-long-running-processes-b3ee769f0a27 Some communities have ...