<!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. redirectTo、navigateTo与switchTap区别

    老是记忆不大清楚,简单写一下 简单作区分就是: redirectTo:关闭当前页(卸载),跳转到指定页 navigateTo:保留当前页(隐藏),跳转到指定页 switchTap:只能用于跳转到tab ...

  2. 极光推送消息——Alias别称方式（Andirod）

    1.pom文件引入相关jar包 <!--极光推送消息start--> <dependency> <groupId>net.sf.json-lib</group ...

  3. 使用VirtualBox虚拟机搭建hadoop运行环境，

    最近学了一下大数据,包括hadoop环境的搭建,搭建工具:centos6.5,hadoop2.6.4,eclipse Mars.1 Release (4.5.1),jdk1.8 第一步.网络与ip地址 ...

  4. 死磕 java线程系列之创建线程的8种方式

    (手机横屏看源码更方便) 问题 (1)创建线程有哪几种方式? (2)它们分别有什么运用场景? 简介 创建线程,是多线程编程中最基本的操作,彤哥总结了一下,大概有8种创建线程的方式,你知道吗? 继承Th ...

  5. AOP框架Dora.Interception 3.0 [1]: 编程体验

    .NET Core正式发布之后,我为.NET Core度身定制的AOP框架Dora.Interception也升级到3.0.这个版本除了升级底层类库(.NET Standard 2.1)之外,我还对它 ...

  6. ThinkPHP框架快速开发网站

    使用ThinkPHP框架快速搭建网站 这一周一直忙于做实验室的网站,基本功能算是完成了.比较有收获的是大概了解了ThinkPHP框架.写一些东西留作纪念吧.如果对于同样是Web方面新手的你有一丝丝帮助 ...

  7. Python之——爱心代码参与情人节

    一行代码实现输出爱心图,参考https://zhuanlan.zhihu.com/p/23321351 原理: 1.借助数学函数——((x * 0.05) ** 2 + (y * 0.1) ** 2 ...

  8. go语言标准库之http/template

    html/template包实现了数据驱动的模板,用于生成可对抗代码注入的安全HTML输出.它提供了和text/template包相同的接口,Go语言中输出HTML的场景都应使用text/templa ...

  9. Spring Boot(四) Mybatis-MySql

    Spring Boot(四) Mybatis-MySql 0.准备数据库表 -- ---------------------------- -- Table structure for person ...

  10. IDEA 学习笔记之 Java项目开发

    Java项目开发: 新建模块: 添加JDK: 导入本地Jars: 从远程Maven仓库下载: 创建package: 新建类/接口/枚举等: 字体太小,改字体: Duplicate Scheme 修改编 ...