<!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. 2019 SD卡、U盘无法格式化怎么办的解决方法

    有天 闲的没事, 格式化一下U盘 ,结果突然断电了,我的天.我还在格式化的U盘 ,果然 ,我在此启动电脑后,的U盘直接 就不能用了.于是 我格式化. 然后,我的U盘就怎么也格式化不好了 ,找到了几种解 ...

  2. Maven 梳理 -聚合与继承

    一.聚合 如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合 1.1.聚合配置代码 1 <modules> 2 <module>模块一</module&g ...

  3. Jquery Validate 相关参数及常用的自定义验证规则

    一.官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 二.默认校验规则 1 2 3 4 5 6 7 8 9 10 1 ...

  4. CSS 换行

    默认情况下,元素的属性是 white-space:normal:自动换行:(不把单词截断,会把单词看作一个整体) -----但是但是但是但是..当元素中的内容是一对没有空格的字符/数字时,超过容器宽度 ...

  5. uC/OS-III 时钟节拍（一）

    时钟节拍就是操作系统的时基,操作系统要实现时间上的管理,必须依赖于时基(时基即时间基准,操作系统的基准时钟). uC/OS-III时钟节拍的实现过程 时钟节拍就是系统以固定的频率产生中断(时基中断), ...

  6. Windows Terminal 安装及美化

    windows terminal 是今年微软Build大会上推出的一款的全新终端,用来代替cmder之类的第三方终端.具有亚克力透明.多标签.Unicode支持(中文,Emoji).自带等宽字体等这些 ...

  7. 使用.Htaccess文件实现301重定向常用的七种方法

    使用.Htaccess文件实现301重定向常用的七种方法   301重定向对广大站长来说并不陌生,从网站建设到目录优化,避免不了对网站目录进行更改,在这种情况下用户的收藏夹里面和搜索引擎里面可能保存的 ...

  8. Kafka0.11之RoundRobinPartitioner/HashPartitioner（Scala）：

    RoundRobinPartitioner/HashPartitioner: import java.util import java.util.concurrent.atomic.AtomicLon ...

  9. scalikejdbc 学习笔记(2)

    使用scalikejdbc config (src\main\resources) # MySQL(dev) dev.db.default.driver="com.mysql.jdbc.Dr ...

  10. UVA - 11400　Lighting System Design

    题文: You are given the task to design a lighting system for a huge conference hall. After doing a lot ...