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 ...
随机推荐
- 【JVM 知识体系框架总结】
JVM 内存分布 线程共享数据区: 方法区->类信息,静态变量 堆->数组对象 线程隔离区 虚拟机栈-> 方法 本地方法栈->本地方法库 native 堆.程序计数器 JVM ...
- 使用maven开发javaweb项目
想重新学习一下java web的知识,之前也学习过一些但是也没有用在开发中所以也忘的七七八八了,因为从事Android开发免不了要与服务器打交道,有时候想自己写一个小DEMO需要服务器的时候感觉真是很 ...
- myql忽略大小写问题解决
linux系统下启动mysql默认是区分大小写的,如果刚好项目中使用的表名与数据库中表名大小写有冲突,此时就需要忽略mysql表名大小写了. 解决方式一: 1.关闭数据库 mysqladmin -ur ...
- FastDfs之TrackerServer的详细配置介绍
# is this config file disabled # false for enabled # true for disabled disabled=false #当前配置是否不可用fals ...
- VR应用评测 - Google Spotlight Story: Sonaria
Google Spotlight Story: Sonaria 一个5min左右的VR小电影,坐姿观看,但是用户其实可以移动+旋转视角.画面很抽象,所有的物体都由基本的单色几何形状组成,主角是两个一公 ...
- 利用基本数据封装类（如：Integer,Float）等实现数据类型转换
/** * 利用基本数据封装类进行数据类型转换 * @author dyh * */ public class TypeConversion { public static void main(Str ...
- Docker5-docker私库的搭建及常用方法-harbor-registry方式
一.简介 1.官方已经提供registry镜像为什么还需要用harbor 1)registry缺少镜像清理机制,可以push但是不能删除,耗费空间 2)registry缺乏相应的扩展机制 3)harb ...
- Angular: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as ‘standalone’ in ngModelOptions.
在Angular中,动态生成的Html控件,如果没有name属性并且在ts中要操作Model的内容.就会引发如题的错误. 解决方案两个: 加上name的属性 设置ngModelOptions [n ...
- Zygote家的大儿子 —— SystemServer
本文基于 Android 9.0 , 代码仓库地址 : android_9.0.0_r45 文中源码链接: SystemServer.java SystemServiceManager.java Sy ...
- 问题TypeError: __init__() takes 1 positional argument but 2 were given解决方案
在搭建自动化框架时,遇到一个问题,如下图: 根据报错的意思,应该是__init__函数的问题, 位置应该是HomePage文件 立马去查看一下文件,如图: 原来是因为的粗心大意__init__(sel ...