Vue.js的HelloWorld
2018-05-08 本文已影响38人
小雨转
vue.js是什么
Vue.js是一套用于构建用户界面的渐进式框架。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。
vue.js的特性
- 确实轻量
- 数据绑定
- 指令
- 插件化
vue.js的语法
- 插值
文本插值是最基本的形式，用双大括号{{ }} - 指令
指令是带有v-前缀的特殊性，主要绑定表达式，也就是javascript表达式和过滤器。指令的作用是当表达式的值发生变化时，将这个变化也反映到DOM上。 - 常用指令有：
- v-text和v-html
- 监听事件指令 v-on
- 属性绑定指令 v-bind
- 表单输入绑定指令 v-model
- 计算属性
- 条件渲染：v-if 和 v-show的区别
- HelloWorld 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-for='item in fruit'>{{item}}</div>
<!-- 隐藏时，v-if的那个div在dom中移除了，是真正的条件渲染，确保适当的销毁和重建，
直到条件第一次为真时才开始渲染，有高的切换开销，运行条件很少改变的时候，用v-if比较好 -->
<div v-if='showOrhide'>显示或隐藏1</div>
<!-- 隐藏时，v-show 的div则通过display:none来表达隐藏，不管初始条件是什么都会被渲染
有更好的初始渲染开销，适合需要频繁切换 -->
<div v-show='showOrhide2'>显示或隐藏2</div>
<h2>计算2个数之和</h2>
第一个数：<input v-model='oneNum'>
第二个数：<input v-model='twoNum'>
<div>计算结果：{{result}}</div>
<!-- 表单输入绑定指令v-model,v-model指令在表单<input>及<textarea>元素上创建双向数据绑定
它会根据控件类型自动选取正确的方法来更新元素，负责监听用户的输入时间以更新数据，并对一些
极端场景进行一些特殊处理 -->
<input v-model='content2'>
<div>你输入了：{{content2}}</div>
<!-- v-bind的缩写是: -->
<div :title='title'>Hello vue!</div>
<!-- 属性绑定指令v-bind 用于响应式地更新HTML属性 -->
<div v-bind:title='title'>Hello vue!</div>
<!-- v-on可以简写为@ -->
<div @click='clickMe'>点我</div>
<!-- 指令v-on监听DOM事件，并在触发时运行一些Javascript代码 -->
<div v-on:click='clickMe'>点我</div>
<!-- 用指令v-html输出标签中的内容 -->
<div v-html='content'></div>
<!-- 用指令v-text输出结果为带标签的文本 -->
<div v-text='content'></div>
<!-- <h1>你好，{{msg}}</h1> -->
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
// el:是element的缩写，指要操作/绑定的元素
data:{
msg:'hello vue!',
content:'<h1>我是标题</h1>',
title:'这是标题',
content2:'这是内容',
oneNum:'',
twoNum:'',
showOrhide:true, //显示
showOrhide2:false, //隐藏，下面覆盖上面的
fruit:["苹果","桃子","西瓜"]
},
// data:写需要操作改变的内容
//插值，文本插值是最基本的形式，用大括号{{}},如下代码
// template:'<h1>你好，{{msg}}</h1>'
//自动根据el，template，data数据生成最终的效果。最后放在挂载点之中
methods:{
clickMe:function(){
alert("你点到我了")
this.content="呵呵呵"
//改变插值
}
},
// 事件写在Vue实例的methods对象里
computed:{
result:function(){
//第一次进入页面是没有输入的，给个提示
if (this.oneNum==''||this.twoNum=='') {
return '你还没有输入'
}else{
//输入了2个数，就开始计算
return parseInt(this.oneNum) + parseInt(this.twoNum)
}
}
}
//computed 计算属性，它的性能是比较高的，只有当他依赖的属性发生变化时，
//它才会重新请求计算，否则使用上一次的缓存值。所以如果一个庞大的数据项目，
//需要有缓存的，就可以用这种方法。可以减少请求次数，达到优化。
})
</script>
</body>
</html>
