学习vue.js的自我梳理笔记

基本语法格式:

<script>

new Vue({

el: ‘#app‘,

data: {

url: ‘http://www.runoob.com‘

}

})

</script>

指令 【指令是带有 v- 前缀的特殊属性。】

判断  <p v-if="seen">现在你看到我了</p>

参数  <a v-bind:href="url">菜鸟教程</a>

监听  v-on 指令,它用于监听 DOM 事件: <a v-on:click="doSomething">

  过滤器:{{ message | capitalize }}   或   <div v-bind:id="rawId | formatId"></div>

    例:

    

双向数据绑定  v-model用在表单控件上的,用于实现双向数据绑定,所以如果你用在除了表单控件以外的标签是没有任何效果的。

===========================

计算属性:computed

computed vs methods

我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

=====================

Vue.js 样式绑定

v-bind:class  设置一个对象

===========================

Vue.js 事件处理器

事件监听可以使用 v-on 指令:

====================

Vue.js 组件

prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。

//js

Vue.component(‘todo-item‘, {

props: [‘todo‘],

template: ‘<li>{{ todo }}</li>‘

})

new Vue({

el: ‘#app‘,

data: {

todo :""

}

})

不理解的问题:

原文地址:https://www.cnblogs.com/liuyuweb/p/8525016.html

时间: 2024-10-16 14:11:35

学习vue.js的自我梳理笔记的相关文章

从零开始学习Vue.js,学习笔记

一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/v2/api/ 二.vue.js是什么 Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手 Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用自底向上

初步学习vue.js

vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同步非常简单. <!--html页面--> <div id="example"> hello {{name}} </div> ---------------------------------------------- //js文件 var example

学习Vue.js之vue移动端框架到底哪家强

官网:https://cn.vuejs.org/ Weex 2016年4月21日,阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请. Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能.可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用. Weex能够

学习Vue.js

Vue.js官网 Vue.js官方教程 Vue.js教程 哔哩哔哩Vue.js教程 原文地址:https://www.cnblogs.com/hool/p/12039586.html

学习 vue.js,Node.JS 等技术不知道写什么东西?请推荐点稍微复杂点的入门项目。

https://www.zhihu.com/question/38269617 11-28 更新: 最近把项目放到了vps上,虽然之后就没更新过..但是还是无耻得放一下吧,哈哈. http://goh5.luoye.pw =========更新分割线======== 新鲜出炉,先放地址:GitHub - luoye-fe/goh5: visual h5 edit个人开源H5 CMS,类似易企秀.初页,虽然没人家那么牛..\( ̄▽ ̄)/ 数据库:MongoDB后台:NodeJS前台:Vue.Vue

Vue.js 学习入门:介绍及安装

Vue.js 是什么? Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合. 详细讲解内容可见:一句话理解Vue核心内容 (这块内容之后再做个阅读笔记) 环境搭建 1.下载 nodejs(http://nodejs.cn): node -v 终端查看安装成功 npm -v 查看npm版本安装成功 2.安装 vue 命令:npm

vue.js学习之组件数据流详解

本文和大家分享的主要是vue.js组件数据流相关内容,一起来看看吧,希望对大家学习vue.js有所帮助. 一.组件 组件,可以说是现代前端框架中必不可少的组成部分.使用组件,不仅能极大地提高代码的复用率和开发者的开发效率,对于代码后期的维护也有着非常重要的意义.前端开发,由于历史遗留原因,WebComponent 虽然好用,但其发展情况却受到极大地限制,和很多新兴的前端技术一样,可望而不可即.基于这样的情况,聪明的开发者们尝试通过框架内部集成相应的功能来完成组件化,各种现代前端框架基本上都有各自

Vue.js学习之条件v-if和列表循环v-for详解

本文将继续和大家分享Vue.js的基础知识,主要是介绍Vue.js的条件v-if和列表循环v-for的相关使用,一起来看看吧,希望可以帮助大家更好的学习Vue.js. v-if .v-else.v-show.还可以使用template <div v-if="ok">ok</div> <div v-else>No</div> <div v-show="ok">ok</div> <templa

vue.js 学习之模板语法详解

本文和大家分享的主要是vue.js 的模板语法,希望对大家学习vue.js有所帮助,一起来看看吧. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数.结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 如果你熟悉虚拟 D