index.html
<!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的更多相关文章
- MySQL 优化之 ICP (index condition pushdown:索引条件下推)
ICP技术是在MySQL5.6中引入的一种索引优化技术.它能减少在使用 二级索引 过滤where条件时的回表次数 和 减少MySQL server层和引擎层的交互次数.在索引组织表中,使用二级索引进行 ...
- 在v-for中利用index来对第一项添加class(vue2.0)
<li v-for="(el,index) in event" v-bind:class="{ 'm-swipe-active': !index}"> ...
- Ubuntu-server 下Apache2 配置.htaccess 隐藏thinkPHP项目index.php
需要开启Apache2的rewrite模块 1.打开/etc/apache2/apache2.conf 将文件中的AllowOverride None改为AllowOverride All 2.修改m ...
- SQL Server-聚焦强制索引查询条件和Columnstore Index（九）
前言 本节我们再来穿插讲讲索引知识,后续再讲数据类型中的日期类型,简短的内容,深入的理解,Always to review the basics. 强制索引查询条件 前面我们也讲了一点强制索引查询的知 ...
- directx12中vetex buffer、index buffer和constant buffer绑定piple line的时机
类别 时机 函数 建Heap vetex buffer 在Draw函数中 ID3D12GraphicsCommandList::IASetVertexBuffer 否 index buffer 在Dr ...
- URL_MODEL 2 不能访问 在APACHE服务器上的访问方式上去除index.php
thinkphp URL_MODEL=2,访问链接http://i.cnblogs.com/Online/index.html 报错: Not Found The requested URL /on ...
- index+match函数在压实度中对盒号盒质量随机不重复的最佳使用
首先按照升序排列好盒号和盒质量,使其一一对应, 盒号 盒重量 随机值rand() 随机值大小排列rank 1 2001 0.01 ...
- [LeetCode] Random Pick Index 随机拾取序列
Given an array of integers with possible duplicates, randomly output the index of a given target num ...
- Zend Framework 项目 index.php 的问题
默认生成的Zend项目在public目录下会自动生成一个.htaccess文件,这是用来实现伪静态,即隐藏index.php这个唯一入口文件的. 但是,搭建项目时遇到一个问题:URL中如果不加inde ...
- 0103MySQL中的B-tree索引 USINGWHERE和USING INDEX同时出现
转自博客http://www.amogoo.com/article/4 前提1,为了与时俱进,文中数据库环境为MySQL5.6版本2,为了通用,更为了避免造数据的痛苦,文中所涉及表.数据,均来自于My ...
随机推荐
- Kafka系列二之部署与使用
Kafka部署与使用 写在前面 从上一篇Kafka的架构介绍和安装中,可能,你还一直很蒙,kafka到底该怎么使用呢?接下来,我们就来介绍Kafka的部署与使用.上篇文章中我们说到,Kafka的几个重 ...
- Idea 设置Eclipse快捷键（常用）
使用Idea不习惯,特此将其配置成Eclipse风格的. 1.选择Eclipse风格,选择copy一份,可以自己重命名. 2.设置生成快捷键的快捷键(例如:Eclipse中的Alt+/) 3.设置ma ...
- MongoDB的查询索引
目录 为什么要建立索引? 索引的分类有哪些? _id索引 单键索引 多键索引 复合索引 过期索引 hello,今天是万圣节
- .net core 3.0 Signalr - 03 使用MessagePack压缩传输内容
## MessagePack基础介绍 Signalr默认使用的是json形式传递数据,但是signalr提供了灵活的扩展,支持MessagePack形式序列化数据,以增加性能降低网络传输的效果,极大的 ...
- 002-python函数、高级特性
1.函数 1.1 定义函数 在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回 自定义一个求绝对 ...
- httpd2.4
更换网站主页目录 1.在httpd.conf文件中更改documentroot为新的路径,并为其相应的路径给与相应的权限. Documentroot "/www/http" < ...
- MySQL InnoDB如何保证事务特性
如果有人问你"数据库事务有哪些特性"?你可能会很快回答出原子性.一致性.隔离性.持久性即ACID特性.那么你知道InnoDB如何保证这些事务特性的吗?如果知道的话这篇文章就可以直接 ...
- Android_基于监听的事件处理机制
一.引言 在经过几天的学习之后, 首先熟悉了几大基本布局以及一些常用控件的使用方法,目前正在学习如何实现一个基本的登录注册界面及其功能,而实现功能就需要我们采用事件处理机制来进行调用事件处理方法.以下 ...
- poll(2) 源码分析
poll(2) poll(2) 系统调用的功能和 select(2) 类似:等待一个文件集合中的文件描述符就绪进行I/O操作. 使用 实现 select(2) 的局限性: 关注的文件描述符集合大小最大 ...
- docker镜像命令使用
创建docker容器时使用的docker镜像如果在本地中不存在,docker就会自动从docker镜像仓库中下载,默认的docker镜像仓库是Docker Hub公共镜像源 使用docker sear ...