在学习vue之前,我们应了解一下什么是vue.js?

  什么是Vue.js?

    Vue.js是目前最后一个前端框架,React是最流行的一个前端框架(react除了开发网站,还可以开发手机App,Vue语法也是可以进行手机App,还需要借助 weex)

    Vue.js是前端的主流框架之一,和angular、react.js一起,并成为前端三大主流框架

    Vue.js是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于第三方库即有项目整合(Vue有配置的第三方类库,可以整合起来做大型项目的开发)

    前端的主要工作:主要负责MVC中的V这一层,主要工作就是和界面打交道,来制作页面效果

  Node(后端)中的mvc与前端mvvm之间的区别:

    mvc是后端的分层开发概念

    mvvm是前端视图层的概念,主要关注于视图层分离,也就是说:mvvm把前端的视图层,分为三部分:model,view,vm viewmodel

  Vue

    vue返回的是一个对象

   vue是一个mvvm的框架,(面试官常问的),angular是mvc的框架

   Vue是vue的实例,这个实例存在计算机中,主要干俩大事:1、绑定事件;2、dom检测

    Vuejs是封装的一个类,参数是options对象

    Vue全家桶包括:vuex、vue-router、vue-resource还有构建工具 vue-cli

    但是vue-resource 现在不使用了,用的是axios

    最常用的属性是:

    el:""     指定vue所操作的dom范围,属性值是你获取的节点

    data     就是vue的model,是存放数据的,属性值是一个对象或者是一个函数,在组件中的data是一个函数

     methods   是vue中的事件方法,

  vue的基本内容:

    Vue的渲染:

      指令式渲染:

    v-html,v-text 采用{{}}语法==>插值运算

    v-html:它可以加标签,它会解析成html

    v-text:不能加标签,如果加了,它会当作字符串展示出来

 插值表达式:

  {{ data中的数据 }}

 v-text与插值表达式的区别:

 默认v-text没有闪烁的问题的,而插值表达式有闪烁问题

 v-text 会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空

 v-html v-text的区别:

 v-html会解析html格式

 v-text与插值表达式会把内容当做文本来解析

 v-html 和 v-text都会覆盖元素中原有的内容

    v-cloak

      v-cloak     能够解决 插值表达式闪烁的问题

         

      并在css中设置:

  [v-cloak]{

                                    display: none;

                           }

让所有设置 v-cloak 的元素隐藏,当加载完毕之后,元素身上的 v-cloak 就会消失

    条件指令:v-if

      v-if="a"

后面的值如果是true节点就显示,false就隐藏

           

    v-show=""

        改变css中的display

     后面的值如果是true,节点就显示,false就隐藏

    v-if与v-show的区别:

    v-if是对节点的删除和添加,v-show是堆display属性值none和block的切换

    v-if与v-show的区别及使用场景:

  共同点:都是动态显示DOM元素

  不同点:

  v-if:

  v-if 是动态的向DOM树内添加或删除DOM元素

  v-if 切换一个局部编译/卸载的过程,切换时合适销毁和重建内部事件监听和子组件

  v-if是懒惰性的,初始条件 = false,什么也不做,只有在条件第一次 = true时,才开始局部编译

   v-show 是在任何条件下(首次条件是否为着真)都会被编译,然后缓存,而且DOM元素保留

  v-if有更高的切换消耗

  使用场景:

  v-if 适合运营条件不大可能改变

  v-show

   v-show有更高的初始化渲染消耗

  v-show只是简单的基于css切换

  v-show是通过设置DOM元素的display实现控制显隐的

   使用场景:

  v-show 适合频繁切换

    循环指令:v-for=""

    * 值是一个数组  (item,index) in 数组名

    * 值是一个对象  (value,key) in 对象名        value是属性值,key是属性

    在v-for中key的使用注意事项:

v-for 循环的时候,key属性只能使用 number 或string,且是惟一的

key在使用的时候,必须使用 v-bind 属性绑定的形式,指定key的值

    动态属性:v-bind:class="a"

    可以简写    :class="a"          v-bind可以省略

    节点上绑定事件:

       v-on:click="fn"         可简写:@click="fn"

    事件方法写在methods中

    v-on 监听事件

     v-on:click="事件名"

     缩写@click="事件名"

    v-model 数据绑定

     可以在表单中使用v-model实现数据双向绑定

     text类型中的文本都是字符串,v-model中的值相同

        

       复选框 v-model中的值是boolean

        

       单选框  v-model中值是value

        

        

    v-model实现的原理:

  angular是mvc模式,ng-model是靠脏值检测

  vue靠的是数据劫持和发布者订阅者模式

  数据劫持:

  Object.definePropery()  这个方法

   * 生成对象的方法    字面量  var obj={}/new Object()

   * Object.definePropery()  给一个对象定义新属性或修改一个对象的属性

   * object.getOwnPropertyDescriptor()   返回关于一个对象某个属性的描述符,

    第一个参数是目标对象,第二个参数是 对象的某个属性

      var obj={age:12}

      console.log(object.getOwnPropertyDescriptor(obj,'age'))

    返回属性的意思:

    configurable  配置选项,值为true代表这个属性可删除

    enumerable    值为true 代表可枚举 可以使用 for in 遍历

    value         这个属性的值

    writeable     代表这个属性可以更改

     如果有了set和get属性就不能有writeable 和 value属性

    常见的修饰符:

      .lazy  v-model 在每次 input 事件触发后将输入框的值与数据进行同步

    <input v-model.lazy="msg" >

 .number           自动将用户的输入值转为数值类型

    <input v-model.number="age" type="number">

 .trim                 自动过滤用户输入的首尾空白字符

<input v-model.trim="msg">

    vue的事件修饰符

  vue.js为 v-on 提供了事件修饰符

  .stop                 阻止maop

  .prevent           阻止默认事件

  .captur             添加事件监听器时使用事件捕获模式

  .self                  只当事件在该元素本身(比如不是子元素)触发是触发回调

   .once                事件值触发一次

  事件修饰符是可以串联的:

  

  .stop和.self的区别:

  .stop阻止事件冒泡

  .self只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡行为

vue的基本语法的更多相关文章

  1. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  2. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  3. Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  4. vue 的基本语法

    一 . Vue 的介绍 1 . 前端的三大框架 (可以去 GitHub 查看三个框架的 star 星) vue   :  作者尤雨溪, 渐进式的JavaScript 框架 react :  Faceb ...

  5. vue基础---模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  6. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  7. VUE:模板语法(小白自学)

    VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...

  8. vue 的基本语法和常用指令

    什么是vue.js Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  9. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  10. day67:Vue:es6基本语法&vue.js基本使用&vue指令系统

    目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...

随机推荐

  1. 随手记录---jq如何判断当前元素是第几个元素

    主要自己总是不记得 结构如下,涉及jq中获取当前元素是父元素的的第几个元素,jq中获取某类在同类元素中占第几,each方法 <div class="parent"> & ...

  2. Spring Cloud Config(三):基于JDBC搭建配置中心

    1.简介 本文主要内容是基于jdbc搭建配置中心,使应用从配置中心读取配置信息并成功注册到注册中心,关于配置信息表结构仅供参考,大家可以根据具体需要进行扩展. 2.Config Server 搭建 2 ...

  3. 2016"百度之星" - 初赛(Astar Round2A)1001 All X(HDU5690)——找循环节|快速幂

    一个由m个数字x组成的新数字,问其能否mod k等于c. 先提供第一种思路,找循环节.因为每次多一位数都是进行(t*10+x)mod k(这里是同余模的体现),因为x,k都确定,只要t再一样得到的答案 ...

  4. oracle查找表索引信息

    select owner,index_name,index_type from all_indexes where owner='xxxx' and table_name='xxx' select * ...

  5. XMLHttpRequest Level2 新功能

    XMLHttpRequest是浏览器的接口,使得javascript可以进行HTTP(S)通信: 2008年2月,就提出了XMLHttpRequest Level 2 草案. 这个XMLHttpReq ...

  6. Qt:使用Model-View,动态的加载显示数据

    共有 main.cpp, Widget.h, Widget.cpp, Widget.ui, MyModel.h, MyModel.cpp 六个文件. 可从此下载整个工程文件: /Files/biao/ ...

  7. [go]日志库小例子

    输出日志 //输出日志到console msg := fmt.Sprintf(format, args...) //format里的坑 args解出的数据相匹配 fmt.Fprintf(os.Stdo ...

  8. SQL-W3School-基础:SQL UPDATE 语句

    ylbtech-SQL-W3School-基础:SQL UPDATE 语句 1.返回顶部 1. Update 语句 Update 语句用于修改表中的数据. 语法: UPDATE 表名称 SET 列名称 ...

  9. ShapeDrawable

    形状的Drawable咯,定义基本的几何图形,如(矩形,圆形,线条等),根元素是<shape../> 节点比较多,相关的节点如下: ① <shape>: ~ visible:设 ...

  10. Flask模拟实现CSRF攻击的方法

    https://www.jb51.net/article/144371.htm https://www.cnblogs.com/888888CN/p/9489345.html http://xiaor ...