Vue2.0笔记——起步

起步

同其他jquery一样,Vue也是需要引用的通过<script>标签引入js文件

<script src="js/vue.js"></script>

你可以去github下载,也可以直接引用Vue的js

https://github.com/vuejs/vue/releases
或
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

一个简单的HelloWorld
1.创建html,引入vue.js,只需要在script中编写如下代码

var vm = new Vue({
    el:‘#app‘,
    data:{
        message:‘HelloWorld‘
    }
})

2.然后在body中添加div标签,并添加id为app,如下代码:

<div id=‘app‘>
    {{message}}
<div>

3.注意DOM编译顺序,按需添加windows.onload方法。
Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的

new Vue({})即表示一个实例对象,el选项为Vue实例挂载的目标,实例挂载后,元素可用vm.$el访问。具体更多选项在后篇文章。

接下来,我将一篇篇的写下自己的笔记。

原文地址:http://blog.51cto.com/zouzhelu/2103585

时间: 2024-10-03 18:08:15

Vue2.0笔记——起步的相关文章

Vue2.0笔记——Vue实例

Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 当创建一个 Vue 实例时,你可以传入一个选项对象,就如前面所提到的如:data,methods,computed,watch等等.一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.举个例子,一个 todo 应用的组件树可以是这样的: 根实例Root └─ TodoList ├─ TodoIte

Vue2.0笔记——{{}}模板与自定义过滤器

模板语法 让我们回到最开始 <div id="app"> <h1>{{message}}</h1> </div> <script> var vm = new Vue({ el:'#app', data:{ message:'HelloWorld' } }) </script> 这是一个HelloWorld,简单的通过模板输出.我们称之为数据绑定,而最常见的就是"Mustache"语法 (双大括号

Vue2.0笔记——组件

组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 使用组件 组件的注册与使用 全局注册 我们需要通过一个全局的API来构造.Vue.extend(options)用法:使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象.同时还需要一个API通过这个构造器来注册组件,之后才能使用.Vue.component(id, [definition])用

Vue2.0笔记——属性绑定和Class与Style绑定

属性绑定 通过指令v-bind可以绑定属性,该指令同v-on一样,也有一个简写,":"冒号.绑定元素的属性,并且可与元素的原属性共存.当原属性有值时则显示原属性的值,无值则使用绑定的值. <div id="app"> <img :src="url" :width="width" width="800" :height="height"/> </div>

Vue2.0笔记——Vue常用实例属性,实例方法

实例属性 vm.$el vm.$data vm.options vm.$refs vm.$root vm.$el 该实例属性用于获取Vue实例使用的根DOM元素,即el选项所指的元素DOM <body> <div id="app"> <h4>你好,这是四级标题</h4> <p>这是一个段落,我什么都不想说</p> </div> <button onclick="getEl()"

Vue2.0笔记——组件2

组件组合 父子组件的通信 组件 A 在它的模板中使用了组件 B.它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件. 首先,需要在Vue实例里定义一个组件,设置data,然后在这个组件里再添加一个conponents选项,注意不要添错位置.示例: <div id="app"> <my-father></my-father> </div> //父组件的模板 <template id=&q

Vue2.0笔记——自定义指令

自定义指令 自定义指令主要用于,除系统提供外,自己对DOM的底层操作.例如当页面加载时需要将一个文本框为自动获得焦点.只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态. 我们通过全局自定义指令和局部自定义指令来讲解autofouce案例. 全局自定义指令 在全局API中通过Vue.directive( id, [definition] )来注册或获取全局指令.参数: id表示自定义的指令名称 definition为自定义指令的定义,一般可以含有几个生命周期钩子函数 bi

Vue2.0笔记——vue-router路由

简介 使用Vue.js开发SPA(Single Page Application)单页面应用.vue-router可以通过html5的history API或者hash实现单页应用,即不刷新跳转,切换地址,只是页面上的组件的切换:vue-router可以实现页面间传参等其他功能: 基本用法 当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 首先我们需要定义链接url,而vue-ro

vue2.0 路由学习笔记

昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li a 为例 <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> 使用 rou