vue基础点

1、v-model:主要在表单中使用,双向功能;

2、插值:

  {{}} : 文本插值,将数据解释为纯文本

  v-text:

  v-html:输出真正的html,数据绑定会被忽略,只对可信内容使用 HTML 插值,绝不要对用户提供的内容插值,不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎

  v-text:文本渲染,类似{{}}}

3、v-show:控制显示、隐藏(添加display:block/none)

4、v-if:控制显示、隐藏,DOM结构有或没有,支持<template></template>

5、v-bind:绑定属性,给DOM元素添加属性,绑定内联样式

6、v-for:循环,可以是数组,也可以是对象,可以与组件使用

7、v-on:事件绑定

8、v-once:执行一次性地插值,当数据改变时,插值处的内容不会更新

9、组件(component):提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用,一个组件实质上是一个拥有预定义选项的一个 Vue 实例,所有的 Vue.js 组件其实都是被扩展的 Vue 实例;要确保在初始化根实例 之前 注册了组件

10、过滤器:过滤器只能在 mustache 绑定中使用,由“管道符”指示;过滤器函数总接受表达式的值作为第一个参数

11、修饰符

  1)事件修饰符:在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求,v-on提供了事件修饰符,由点(.)表示的指令后缀来调用

        

  2)按键修饰符:监听键盘事件时,我们经常需要监测常见的键值

        

        

 

   3).lazy:v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步;(v-model.lazy)
   4).number:自动将用户输入值转为number类型(v-model.number)

   5).trim:自动过滤用户输入的首尾空格

        

12、计算属性(computed  计算缓存):复杂逻辑,应当使用计算属性(需要展示的数据,有一定的逻辑处理时使用),计算属性是基于他的依赖缓存(只有在它的相关依赖发生改变时才会重新取值),计算属性默认只有getter(),但是需要时也可以设置setter()

  计算属性 和 method :都可以实现最终结果,计算属性有一个计算缓存,若相关依赖不改变就不执行此函数;method每当重新渲染就会执行;

  计算属性 和 watch :用于观察 Vue 实例上的数据变动,来响应数据的变化,执行异步操作或昂贵操作

13、表单控件绑定:v-model绑定,绑定的 value 通常是静态字符串(对于勾选框是逻辑值);绑定 value 到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串;

时间: 2024-07-28 16:37:12

vue基础点的相关文章

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

在浏览器上安装 Vue Devtools工具

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools. 2)下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖,然后执行npm run build,编译源程序. 3)编译完成后,目录结构如下: 修改shells.chrome目录

vue.js 入门

简单一句话来描述:vue.js是一个前端框架. 官方文档:https://cn.vuejs.org/v2/guide/index.html 虽然,我以前也会改一些前端样式,但主要是基于HTML和CSS,HTML主要控制页面的结构,CSS主要来控制样式.涉及到JavaScript就比较小白了. 我花了一个下午照着官方文档做练习,当然是只创建一个xxx_demo.html文件,在<script></script> 标签对之间写 Vue.js语法.这不算错,但在工程化的今天,这么学得猴年

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

Vue.js项目模板搭建

前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

vue项目搭建

VUE项目搭建 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev

Vue内容分发slot

前面的话 为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 “transclusion” ).Vue实现了一个内容分发 API,参照了当前 Web 组件规范草案,使用特殊的 <slot> 元素作为原始内容的插槽.本文将详细介绍Vue内容分发slot 编译作用域 在深入内容分发 API 之前,先明确内容在哪个作用域里编译.假定模板为 <child-component> {{ message }} </child-compone

一步一步学习Vue(十一)

本篇继续学习vuex,还是以实例为主:我们以一步一步学Vue(四)中讲述的例子为基础,对其改造,基于vuex重构一遍,这是原始的代码: todolist.js ; (function () { var list = []; var Todo = (function () { var id = 1; return function (title, desc) { this.title = title; this.desc = desc; this.id = id++; } })(); /** *

vue.js路由

Vue.js 路由 Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA). Vue.js 路由需要载入 vue-router 库 中文文档地址:vue-router文档. 安装 1.直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js NPM 推荐使用淘宝镜像: cnpm install vue-route