VUE 入门基础(2)
二,起步
引用方式可以使用 vue-cli
<script src="https://unpkg.com/vue/dist/vue.js"></script>
声明式渲染
<div id="app">
{{ message }}
</div>
var app = new Vue({
el:'#app',
data: {
message: 'Hello Vue'
}
})
在DOM元素上绑定属性
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date()
}
})
v-bind 属性被称为指令,指令带有前缀 v-,以表示他们是Vue.js 提供的特殊属性。
条件与循环
控制切换一个元素的显示也相当简单:
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
绑定数据到数组来渲染一个列表
<div id="app-4>
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{text: 'Learn JavaScript'},
{text: 'Learn Vue'},
{text: 'Build something awesome'}
]
}
})
处理用户输入
用v-on 指令绑定一个监听事件用于调用我们vue实例中定义的方法。
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.splict(' ').reverse().join(' ')
}
}
})
用 v-model 指令 在表单和应用状态中做双向数据绑定。
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
VUE 入门基础(2)的更多相关文章
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- vue入门基础知识点测试
vue入门基础知识点测试 1.文本(值绑定){{var}}----控制<div></div>的值显示当前时间,且1秒更新一次.(可查阅 setinterval 函数,时间Dat ...
- Vue入门基础(火柴)
前言 由于个人十分欣赏博友——小火柴的蓝色理想,他的博文我看了大多数,觉得十分的精彩,然而很多都是看后即忘.我想除了没有经常动手敲代码,更可能是在看的时候忽略了很多细节,因此打算把他的博文通通给“抄袭 ...
- VUE 入门基础(8)
十,组件 使用组件 注册 可以通过以下这种方式创建一个Vue实例 new Vue({ el: '#some-element', }) 注册一个全局组件,你可以使用Vue.component(tagNa ...
- VUE 入门基础(7)
八,事件处理器 监听事件 可以用v-on 指令监听DOM 事件来触发一些javaScript <div id="example-1"> <button v-on: ...
- VUE 入门基础(4)
四,计算属性 基础例子 <div id='example'> <p>0riginal message: "{{message}}"</p> &l ...
- 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定
vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...
- VUE 入门基础(9)
十一,深入响应式原理 声明响应式属性 由于Vue不允许动态添加根级响应式属性,所以你必须在初始化实例钱声明根级响应式属性,哪怕只有一个空值. var vm = new Vue({ data:{ // ...
- VUE 入门基础(6)
六,条件渲染 v-if 添加一个条件块 <h1 v-if="ok">Yes</h1> 也可以用v-else 添加else 块 <template> ...
随机推荐
- PChar,PAnsiChar,String,AnsiString,Char数组,AnsiChar数组转换
PChar,PAnsiChar,String,AnsiString,Char数组,AnsiChar数组之间的转换关系见下图 通过转换链,可以实现任意两个类型之间的互转.如PChar转PAnsiChar ...
- DHTMLX-Grid
DHTMLX - Grid 介绍 dhtmlxGrid是一个灵活的.易于使用的JavaScript网格组件,可以创建DHTML表与丰富的编辑- sensing,固定的多行页眉和页脚,可调整大小的.可拖 ...
- OAF_开发系列24_实现OAF更新记录显示Record History(案例)
20150716 Created By BaoXinjian
- ajaxReturn
controller:$info=array('error'=>0,'msg'=>'');if($user_info){ if($user_info['is_lock']){ ...
- React组件的分类
* 1.statelessComponent 不包含任何state的组件 例如:AntDesign的 :Button,Input组件 * 2.viewComponent 包含少量ui state的组件 ...
- linux下网站搭建
我们知道windows网站搭建一般是:IIS+Asp+Sqlserver,而 linux网站搭建是:Apache+php+Mysql.两者之间个有千秋,但是为什么我们许多的门户网站搭建都选择linux ...
- MVC表单
.cs namespace SendToMvcHello.Controllers { public class HomeController : Controller { // GET: Home p ...
- android 自定义View onMeasure中 super.onMeasure 和 setMeasuredDimension
练习写一个自定义的view,代码是抄网上的,第一次写,没有问题,与网上的示例一样的效果, 第二次.第三次,都出现问题,但是解决了. 昨天进行第四次写再写,又出问题不一样的问题了. 首先是想加一个子包, ...
- 网页WEB打印控件制作-开放源码
在WEB系统中,打印的确是比较烦人的问题,如果我们能制作一个属于自己的自定义的打印插件,那么我们在后续自定义打印的时候能随心所欲的控制打印,这样的效果对于程序员来说是非常开心的一件事件,本文将自己开发 ...
- windows下CMake使用图文手册 Part 3
例子3: 构建动态库(.dll) 静态库(.lib) 采用和例子2一样的文件,但删除了main.cpp E:. │ CMakeLists.txt │ ...