Vue2.0学习文档(Vue介绍)
来源:互联网 发布:php开发环境 编辑:程序博客网 时间:2024/06/11 10:08
一、引入
<script src="http://cdn.bootcss.com/vue/2.3.4/vue.js"></script> <script src="https://unpkg.com/vue"></script>
二、简单指令
1、起步文本插值
<div id="app"> {{message}} </div>
var app=new Vue({ el: "#app", data: { message:"hello" } })
例子1:Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统:
现在数据和 DOM 已经被绑定在一起,所有的元素都是响应式的。我们该如何知道呢?打开你的浏览器的控制台 (就在这个页面打开),并修改 app.message
起步文本插值
2、声明式渲染
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div>
var app2=new Vue({ el:'#app-2', data:{ message:'页面加载于'+new Date().toLocaleString() } })
例2:指令带有前缀 v-,以表示它们是 Vue 提供的特殊属性
它们会在渲染的 DOM 上应用特殊的响应式行为。简言之,这里该指令的作用是:“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。
3、条件与循环
<div id="app-3"> <p v-if="seen"> 现在你看到我了 </p> </div>
var app3=new Vue({ el:'#app-3', data:{ seen:true } })
例3:绑定 DOM 文本到数据,也可以绑定 DOM 结构到数据
3-2
<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:"学习javascript"}, {text:"学习Vue"}, {text:"整个牛项目"} ] } })
3-2:v-for 指令可以绑定数组的数据来渲染一个项目列表
4、处理用户输入
<div id="app-5"> <p>{{message}}</p> <button v-on:click="reverseMessage">逆转消息</button> </div>
例4:绑定 DOM 文本到数据,也可以绑定 DOM 结构到数据
没有触碰 DOM,DOM 操作都由 Vue 来处理,你编写的代码不需要关注底层逻辑。
var app5=new Vue({ el:"#app-5", data:{ message:"Hello Vue.js" }, methods:{ reverseMessage:function(){ this.message=this.message.split('').reverse().join('') } } })
4-2 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定
<div id="app-6"> <p>{{message}}</p> <input v-model="message"> </div>
三、组件化应用构建
1.组件系统:允许我们使用小型、独立和通常可复用的组件构建大型应用。(仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树)
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例,在 Vue 中注册组件很简单:
// 定义名为 todo-item 的新组件Vue.component('todo-item', { template: '<li>这是个待办项</li>'})
现在你可以用它构建另一个组件模板:
<ol> <!-- 创建一个 todo-item 组件的实例 --> <todo-item></todo-item></ol>
但是这样会为每个待办项渲染同样的文本,这看起来并不炫酷,我们应该能将数据从父作用域传到子组件。让我们来修改一下组件的定义,使之能够接受一个属性:
Vue.component('todo-item', { // todo-item 组件现在接受一个 // "prop",类似于一个自定义属性 // 这个属性名为 todo。 props: ['todo'], template: '<li>{{ todo.text }}</li>'})
现在,我们可以使用 v-bind 指令将 todo 传到每一个重复的组件中:
<div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量,即其内容可以是动态的。 我们也需要为每个组件提供一个“key”,晚些时候我们会做个解释。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol></div>
Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>'})var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '随便其他什么人吃的东西' } ] }})
这只是一个假设的例子,但是我们已经设法将应用分割成了两个更小的单元,子单元通过 props 接口实现了与父单元很好的解耦。我们现在可以进一步为我们的 todo-item 组件实现更复杂的模板和逻辑的改进,而不会影响到父单元。
使用了组件的应用模板是什么样的例子:
<div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view></div>
- Vue2.0学习文档(Vue介绍)
- vue2.0 vue-router学习笔记
- Vue2.0学习笔记--介绍
- Vue2.0学习笔记(上)—— 搭建Vue脚手架(vue-cli)
- vue2+vuex+vue-router 快速入门(一) 简单介绍
- vue2+vuex+vue-router 快速入门(五) vuex 介绍
- vue学习笔记04——vue2.0的变化
- vue2+vuex+vue-router 快速入门(三) vue 实例介绍
- vue2+vuex+vue-router 快速入门(四) vue-router 介绍
- vue2.0路由--vue-router
- vue2.0,vue-router配置
- vue2.0使用vue-router
- Vue2.0配置vue-router
- Vue2.0+Vue-cli脚手架
- 基于webpack+Vue2.0搭建webapp(vue-cli原理)
- Ⅰ vue2.0 介绍
- vue-lazyload基础实例(基于vue2.0和vue-router2.0)
- vue-lazyload基础实例(基于vue2.0和vue-router2.0)
- QT控件大全 三十六 QBlackBarButton
- matlab函数2
- 三子棋
- phpObject
- BAyouhua
- Vue2.0学习文档(Vue介绍)
- @Transactional在main.java和test.java下的不同
- 【CSDN下载】第二期:Xcode iOS真机镜像包、人脸探测与识别源码资源
- RecyclerView多布局展示示例
- OnValidate
- 正式版本去掉如ADB debug
- 物料主数据增强(MM01/MM02/MM03)
- LED驱动
- Eclipse快捷键