<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<!--

1、仅仅只需要关注数据、业务逻辑和事件，dom直接的操作隐藏起来，不用再重复去做这个事情。

2、大大增加团队效率，团队协作能力

3、模块化，降低耦合度

4、数据的双向绑定,视图和模型的数据是绑定在一起的，变更1个，那么所有都变更

-->

<!--视图-->

<div id="app">

<h1>{{jsonMsg}}</h1>

<p>{{jsonContent}}</p>

<h1> 这是H1内容： {{ isA ? a : b}}</h1>

<!--将变量绑定到属性上-->

<a v-bind:href="httpUrl">链接地址</a>

<a :href="httpUrl">链接地址</a>

<div>

{{htmlElement}}

</div>

<div v-html='htmlElement'></div>

<h1>{{msg}}</h1>

<h1 v-once>{{msg}}</h1>

<input type="text" v-model='msg' name="" id="" value="" />

<button v-on:click='changeUrl'>更改为淘宝地址</button>

<!--

v-on:可以缩写成@

-->

<button @click='changeMsg'>更改msg</button>

</div>

<!--

vue模板：

1、变量放在{{}}里面，里面可以正常运行JS表达式

2、变量如果要放在HTML的属性里面，那么就需要使用v-bind,缩写即前面加冒号

3、默认是将HTML以字符串的形式输出到视图，如果想要以HTML的形式输出到视图，那么需要使用v-html这个指令

4、v-once只渲染1次

5、绑定事件的书写方式：v-on,

vue应用生命周期（即执行过程）

new Vue(配置变量)

---》初始化

---》beforecreate

---》created

--》beforeMount(渲染之前、挂载之前)

---》mounted

--》beforeupdate

---》updated

---》beforeDestory

---》destoryed

条件渲染：

-->

<script type="text/javascript">

var obj = {

el:'#app',

data:{

msg:'helloworld',

num:'123456778',

isA:false,

a:8,

b:4,

httpUrl:'http://www.baidu.com',

htmlElement:'<button>这是一个按钮</button>',

jsonMsg:'',

jsonContent:''

},

methods:{

changeMsg:function(){

this.msg = '今天天气不错'

},

changeUrl:function(){

this.httpUrl = 'http://www.taobao.com'

}

},

beforeCreate:function(){

console.log('创造之前执行的函数')

},

created:function(){

console.log('创造之后')

},

beforeMount:function(){

console.log('挂载之前')

var that = this

$.ajax({

url:'abc.json',

success:function(res){

console.log(res)

that.jsonMsg = res.msg

that.jsonContent = res.content

}

})

},

mounted:function(){

console.log('挂载之后')

},

beforeUpdate:function(){

console.log('更新之前')

},

updated:function(){

console.log('更新之后')

}

}

var app = new Vue(obj)

console.log(app)

</script>

</body>

</html>

index.html的更多相关文章

  1. MySQL 优化之 ICP (index condition pushdown:索引条件下推)

    ICP技术是在MySQL5.6中引入的一种索引优化技术.它能减少在使用 二级索引 过滤where条件时的回表次数 和 减少MySQL server层和引擎层的交互次数.在索引组织表中,使用二级索引进行 ...

  2. 在v-for中利用index来对第一项添加class(vue2.0)

    <li v-for="(el,index) in event" v-bind:class="{ 'm-swipe-active': !index}"> ...

  3. Ubuntu-server 下Apache2 配置.htaccess 隐藏thinkPHP项目index.php

    需要开启Apache2的rewrite模块 1.打开/etc/apache2/apache2.conf 将文件中的AllowOverride None改为AllowOverride All 2.修改m ...

  4. SQL Server-聚焦强制索引查询条件和Columnstore Index（九）

    前言 本节我们再来穿插讲讲索引知识,后续再讲数据类型中的日期类型,简短的内容,深入的理解,Always to review the basics. 强制索引查询条件 前面我们也讲了一点强制索引查询的知 ...

  5. directx12中vetex buffer、index buffer和constant buffer绑定piple line的时机

    类别 时机 函数 建Heap vetex buffer 在Draw函数中 ID3D12GraphicsCommandList::IASetVertexBuffer 否 index buffer 在Dr ...

  6. URL_MODEL 2 不能访问 在APACHE服务器上的访问方式上去除index.php

    thinkphp URL_MODEL=2,访问链接http://i.cnblogs.com/Online/index.html  报错: Not Found The requested URL /on ...

  7. index+match函数在压实度中对盒号盒质量随机不重复的最佳使用

    首先按照升序排列好盒号和盒质量,使其一一对应, 盒号    盒重量    随机值rand()     随机值大小排列rank 1         2001       0.01             ...

  8. [LeetCode] Random Pick Index 随机拾取序列

    Given an array of integers with possible duplicates, randomly output the index of a given target num ...

  9. Zend Framework 项目 index.php 的问题

    默认生成的Zend项目在public目录下会自动生成一个.htaccess文件,这是用来实现伪静态,即隐藏index.php这个唯一入口文件的. 但是,搭建项目时遇到一个问题:URL中如果不加inde ...

  10. 0103MySQL中的B-tree索引 USINGWHERE和USING INDEX同时出现

    转自博客http://www.amogoo.com/article/4 前提1,为了与时俱进,文中数据库环境为MySQL5.6版本2,为了通用,更为了避免造数据的痛苦,文中所涉及表.数据,均来自于My ...

随机推荐

  1. Python 爬虫监控女神的QQ空间新的说说,实现邮箱发送

    主要实现的功能就是:监控女神的 QQ空间,一旦女神发布新的说说,你的邮箱马上就会收到说说内容,是不是想了解一下 先看看代码运行效果图: PS:只有你有一台云服务器你就可以把程序24h运行起来 直接上代 ...

  2. 基于操作系统原理的Linux 的基本操作和常用命令的使用

    一.实验目的 1．学会不同Linux用户登录的方法. 2．掌握常用Linux命令的使用方法. 3．了解Linux命令中参数选项的用法和作用. 二.实验内容 1． 文件操作命令 (1) 查看文件与目录 ...

  3. Dart数据类型

    变量与常量: 变量: 使用var声明变量,可以赋予不同数据类型的值, 未初始化时默认值是null 使用final声明的变量只能被赋值一次 void main(){ var a; print(a); a ...

  4. 服务器配置https协议，三种免费的方法

    最近想搞一个网站玩玩,发布网站用https协议已经是大势所趋了.例如微信小程序,不使用https协议根本不让接入.所以,分享一下我尝试过的三种方法. 1.Linux自签(OPENSSL生成SSL自签证 ...

  5. 计算机视觉（二）-opencv之createTrackbar()详解

    摘要: 我学习openCV3看的是<学习openCV3>这本书,很厚的一本,不知道是不是因为自己看的还不是很多,个人觉得里面的有些重要函数讲的不是很详细,比如createTrackbar( ...

  6. ant path匹配原则

    ant path匹配原则 又称路径匹配原则,spring中的相关策略类org.springframework.util.AntPathMatcher 路径模式使用了apache ant的路径样式 ap ...

  7. MySQL 和 Navicat Premium 下载及安装全过程

    前言: 我对 “MySQL社区版” 的理解是:它只是一个后台服务,它的管理需要用到其他的数据库管理软件,这里我用的是 Navicat Premium,这个软件可以同时为多个数据库提供管理,比如MySQ ...

  8. mvvm的初步思想

    1.Object.defineProperty(obj,key,desc); 用法:1.给对象新增属性和特性 2.修改对象属性值和特性 desc(属性特性): 1.enumerable:boolean ...

  9. Python 元组(Tuple)操作详解

    Python的元组与列表类似,不同之处在于元组的元素不能修改,元组使用小括号, 列表使用方括号,元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可 一.创建元组 代码如下: tup1 = (' ...

  10. ios手机通过fiddler抓去Https协议包时证书问题

    解决Fiddler无法抓取ios端HTTPS请求的问题 南天E心 关注 2018.01.15 10:36 字数 281 阅读 909评论 0喜欢 0 近日公司服务升级,将所有的接口请求由HTTP升级为 ...