<!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. Spring boot 官网学习笔记 - Spring Boot CLI 入门案例

    安装CLI https://repo.spring.io/release/org/springframework/boot/spring-boot-cli/2.1.1.RELEASE/spring-b ...

  2. 深入探究js中的隐式变量声明

    前两天遇到的问题,经过很多网友的深刻讨论,终于有一个相对可以解释的通的逻辑了,然后我仔细研究了一下相关的点,顺带研究了一下js中的隐式变量. 以下文章中提到的隐式变量都是指没有用var,let,con ...

  3. Angular 内嵌视图、宿主视图

    解析视图: 内嵌视图 - 连接到模板的嵌入视图,在组件模板元素中添加模板(DOM元素.DOM元素组) 宿主视图 - 连接到组件的嵌入视图,在组件元素中添加别的组件 使用类说明: ElementRef ...

  4. 大家久等了，改造版阿里巴巴 sentinel 控制台终于开源了

    前言 最近几天,好几个小伙伴在后台询问,改造后的 sentinel-dashboard 什么时候开源.讲真,不是不想给大家放出来,是因为一些地方还没有完善好,怕误导了大家,在经过了一个星期业余时间的努 ...

  5. javascript基础修炼(13)——记一道有趣的JS脑洞练习题

    目录 一. 题目 二. 解法风暴 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址 ...

  6. sql中的 where 、group by 和 having 用法解析

    --sql中的 where .group by 和 having 用法解析 --如果要用到group by 一般用到的就是“每这个字” 例如说明现在有一个这样的表:每个部门有多少人 就要用到分组的技术 ...

  7. mysql中间件分享（Mysql-prxoy,Atlas,DBProxy,Amoeba,cobar,TDDL）

    hello 各位小伙伴大家好,我是小栈君,这期我们分享关于mysql中间件的研究,也就是数据层的读写分离和负载均衡,希望能够在实际的应用中能够帮助到各位小伙伴. 下期我们将继续分享go语言的系列讲解, ...

  8. 【JZOJ5329】-时间机器

    [JZOJ5264]化学 Description Input Output Sample Input 3 10 1 2 10 Sample Output 5 Hint 题解: 这个题目又是一道贪心题, ...

  9. php函数fsockopen的使用

    函数说明:fsockopen — 打开一个网络连接或者一个Unix套接字连接 语法: resource fsockopen ( string $hostname [, int $port = -1 [ ...

  10. 2019.4.22 python_Flag

    想了很久  最后觉得还是对编程的知识点好好重新的拉一边 回炉重造并不可笑 虽然从C到java到php到python 有两年的时间了 但是很多知识点都是零零碎碎,没有花时间复习和记录 所以决定从pyth ...