美文网首页
vue.js基础笔记

vue.js基础笔记

作者: 虞八荒 | 来源:发表于2019-05-16 11:28 被阅读0次

    2018/10/15周一


    day01

    一  什么是Vue.js 

    答:vue.js是一个轻量级的,的一个渐进式的一个框架主要核心是只关注视图层

    一(1)什么是MVVM

    答:MVVM = model(模型)+view(视图)+ViewModel(视图模型)

    一(2)vue.js有什么不同

    答:因为MVVM模式分为视图和数据,并且分离。所以vue.js不用操作DOM元素。vue会帮助操作

    一(3)如何使用

    答: 一 自动识别最新版本<script src="http//unpkg.conm/vue/dist/vue.min.js"></script>

    二去官方下载,自己引入路径

    二  什么是vue的实例与数据

    答: vue实例就是通过var一个对象创造一个新的vue的构造函数。

    vue数据:可以用v-model的指令,他的值就是我们创建vue实例的name 。

    二(1)生命周期

    答:生命周期就是从创建到销毁的过程。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 

    carted 实例创建完之后调用

            mounted el 挂载后调用

            beforeDestoy 实例销毁前调用

    二(2)什么是插值和表达式        答:双括号里面写的就是插值。会将我们双向绑定的数据实时显示出来。

    语法:  

    <div id="app">{{message}}</div>

    <script>

        var app = new Vue({ ------APP代表一个vue实例

    el: '#app'  --------是一个选择器

    data:{ --------数据

    message: "hellow"

    },

    })

    </script>

    二(3)什么是过滤器

    答:就是通过 | 来过滤掉其他的数据。

    二(4)什么是指令与事件

    答:指令是:前缀带有v-的一个元素。

    事件:就是键盘事件,鼠标事件等。

    二(5)什么是语法糖

    答:就是uoge指令的简写 比如 v-bind=:     v-on=@

    三 什么是计算属性

    答:就是以函数的形式写在vue实例内的computed 并且最终返回结果。

    三(1)计算属性的用法

    答:就是吧data创造的对象在computed里面进行运算。computed有两个默认的属性:getter来读取,setter来提供函数。

    三(2)计算属性的缓存

    答:就是会使用data里面创造的数据。

    四v-bind指令是什么

    答:就是动态更新HTML 元素的属性

    四(1)绑定class的几种方式

    答:直接写在标签里。

    四(2)数组的语法是什么

    答:当需要应用多个class时,可以使用数组语法给class绑定一个数组

    ,引用一个class列表。

    四(3)在组件上的使用

    答:

    四(4)绑定内联样式

    答:就是 使用:style给元素绑定内联样式


    2018/10/16星期二

    day02

    五  基本指令

    答:v-clock,v-once不需要表达是的指令。.

    v-clock:会在vue 实例结束编译 的时候从绑定的HTML 元素上移除。

    v-once:它的元素或组件只渲染一次,之后变成静态内容。

    五(1)条件渲染指令有哪些

    答: [v-if ,  v-else-if,   v-sles], (v-show)两者的区别 

    v-show改变的是css的display的属性

    v-if会根据表达式适当的销毁或者重元素,它是真正的渲染。

    五(2)列表渲染指令

    答:v-for,可以循环一个数组,需要结合in来使用,要以site in sites 形式的特殊语法,seites是源数据数组并且site是数组元素迭代的别名

    五(3)方法与事件的基本用法

    答:<div id="app">

    {{counter}}

    <button @click = "counter++">+1</button>

    </div>

    <script>

    new Vue({

    el:'#app',

    data:{

    counter:0

    }

    })

    </script>

    五(4)实战:利用计算属性,知识等做一个购物车。

    答:已经写好

    六 表单的基本用

    答:v-model双向绑定

    六(1)绑定值是什么

    答:是一个静态字符串或者布尔值

    六(2)修饰符

    答:.lazy可以改变成change事件就是会在失焦或者回车时更新

    .number:将输入值装化为number 类型

       .trim自动过滤输入的首尾空格

    七为什么使用组件

    答:提高重用性,让代码可以重复。

    七(1)组件用法必须要带div包含起来

    答:Vue.component('my-component',{

    })

    七(2)props传递数据的基本用法

    答: 父向子传递数据或者参数需要通过props正向传递

    相关文章

      网友评论

          本文标题:vue.js基础笔记

          本文链接:https://www.haomeiwen.com/subject/jgqczftx.html