Vue基础

前言

　　本人是一名后端开发，最近公司要使用Vue做一些页面，于是义无反顾的开始啃吃啃吃的啃掉Vue这块蛋糕

　　开始本文前，先来一波小知识点，写前端必知必会哦

必知必会

　　HTML（结构）：主要是标签，标签的主要作用是语义。

　　CSS（样式）：层叠样式表(英文全称：Cascading Style Sheets)，作用：定义网页的效果

　　　　　　清除浮动（标准形式）：

　　　　　　　　.clearfix:after{

　　　　　　　　　　　　visibility:hidden;

　　　　　　　　　　　　content:".";

　　　　　　　　　　　　display:block;

　　　　　　　　　　　　clear:both;

　　　　　　　　　　　　height:0;

　　　　　　　　}

备注：

1.visibility:hidden;隐藏内容，同时占位置；visibility:hidden+height:0 等同于 display:none，可以启到在同一个样式中同时使用 display中的两种属性的效果。

2.BFC：Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC产生的条件：

　　1.html根元素

　　2.float的值不为none

　　3.display的值为inline-block、table-cell、table-caption

　　4.position的值为absolute或fix

BFC约束规则：

　　1.生成BFC元素的子元素会一个接着一个防止。垂直方向上他们的起点事一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠，同属一个BFC的两个相邻Box的margin会发生重叠。

　　2.生成BFC元素的子元素中，每一个子元素左外边距与包含块的左边界接触，即使浮动元素也是如此（除非这个子元素自身也是一个浮动元素）。

　　3.BFC的区域不会与float的元素区域重叠。

　　4.计算BFC高度时，浮动元素也参与计算。

　　5.BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。

我们在写css常见的一些问题都可以由上面两条推出，例如：

　　1.Block元素与父元素同宽，所以Block元素竖直方向上垂直排列。

　　2.竖直方向上有的Block元素margin会重叠，水平方向不会。

　　3.浮动元素会尽量接近左上方或右上方。

　　4.为父元素设置overflow:hidden或浮动父元素，则父元素会包含其浮动的子元素。

3.position五种定位：

position定位是指定位置的定位，以下为常用的几种：

1、static（静态定位）：

当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流2、relative定位（相对定位）：

该定位是一种相对的定位，可以通过设置left、top等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流；

3、absolute定位（绝对定位）：

这种定位通过设置top、right、bottom、left这些偏移值，相对于 static 定位以外的第一个父元素进行定位（这种定位通常设置父元素为relative定位来配合使用），在没有父元素的条件下，它的参照为body，该方式脱离文档流；

4、fixed（固定定位）：

这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流；

5、inherit定位：

这种方式规定该元素继承父元素的position属性值。

4.相对定位：占位置作用：1.父相子绝 2.微调元素比如：input标签底部无法对齐的处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

    <style>
        span {
            position:relative;
            top:8px;
        }
        input {
            font-size: 32px;

        }
    </style>
</head>
<body>

<span>输入：</span>
<input type="text">

</body>
</html>

绝对定位：不占位置（说明：这里的占不占位置是指由于脱离了标准文档流）

　　标准流的盒子居中：margin：0 auto;

　　绝对定位的盒子居中：

　　　　　　　　　　position:absolute;

　　　　　　　　　　left:50%;

　　　　　　　　　　margin-left:-width/2;

固定定位：脱离标准流，不占位置比如：固定导航栏 body { padding:导航栏的高度 }

JS（行为）

　　前端开发三大框架：

angular（谷歌公司推出的）
react（Facebook公司推出的）最先使用虚拟DOM
vuejs（尤雨溪）

备注：jquery轮播图插件unslider 虚拟DOM比DOM渲染速度要快

函数：

　　1.构造函数（js中一般首字母大写的默认为构造函数）

　　var arr = new Array();

　　2.字面量方式创建

　　var arr = [1,2,3];

　　3.定义在函数内部的方式：

　　function Person(name){

　　　　this.name = name;

　　　　this.fav = function(){ };

　　};

　　定义在函数外部的方式：

　　Person.propotype.fav = function(){

　　}; # 获取对象的父类

　　var person = new Person("snto");

Node.js

node.js 属于一个服务器语言（可以操作操作系统，可以打开文件）

　　前端语言不能这些操作是由于安全问题

　　node.js 在cmd中退出时连续两次ctrl+c

node.js中导入模块的两种方式：

　　1.var fs = require("fs") #这种方式叫Commonjs模块作用：异步的加载模块

　　2.import fs from "fs" #这种方式叫es6Module

备注：前端几种模块化方案（异步加载模块）：Commonjs、requirejs、seajs、es6Module

babel 工具的作用：解析es6代码转化为es5的语法

webpack 的作用：打包，将HTML、css、js、png等文件打包，也可以压缩这些文件

Vue的开始

　　Vue：数据驱动视图。

　　在Vue中凡是出现 v-*/v-on/v-..等等的表示指令系统。我们在使用指令系统时，v-on:click = "..." 必须是一个字符串的形式

<div id="app">   
<h1>{{ title }}</h1> 
<p>{{ content }}</p>   
<button v-on:click = "函数名">内容</button> 
 </div>


　　var options = {

　　　　el:"#app",    // 绑定的元素

　　　　data:{

　　　　　　title:'标题内容',

　　　　　　content:'内容'

　　}，

　　　　methods：{

　　　　　　函数名: function(){函数内容}

　　}

　　};

　　var app = new Vue(options);

　　data中声明的都是数据属性。

　　我们在对象外面调用对象内部的属性时，不能直接app.el，而要使用app.$el，因为Vue中封装了对应的属性。我们要在前面加$

Vue的母版中是声明式的渲染。支持运算

<h1>{{ 1+2 }}</h1>    #显示 3

<h2>{{ 1>2 ?"真的":"假的" }}</h2>    #显示   假的    （三目运算符）

v-if 和 v-show的区别和使用

　　v-if 条件指令值为true 显示，反之不显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .show1 {
            width:200px;
            height:300px;
            background-color: red;
        }
        .show2 {
            width:200px;
            height:300px;
            background-color: green;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="show1" v-if = "isShow"></div>
    <div class="show2" v-show = "isShow"></div>
    <button v-on:click = 'show'>v-if形式 or v-show形式的显示/隐藏</button>
</div>

<script src="vue.js"></script>
<script>
    var options = {
        el:'#app',
        data:{
            isShow:false
        },
        methods:{
            show:function(){
                this.isShow= !this.isShow;
            }
        }
    };
    var app = new Vue(options);


</script>
</body>
</html>

区别：性能上的差异 v-if 内部是DOM的操作，如果为false，内部是删除的操作，为true是创建的操作，

　　　　　　　　　　v-show 内部是添加样式的操作，为true是设置样式 display:block; 为false是disply:none;

相对之下，我们在使用时，v-if适用于一次性的显示或隐藏，而 v-show适用于频繁的显示或隐藏

v-bind 的用法：只要是标签中的属性，都可以使用v-bind绑定，自定义的属性也可以绑定。用法： v-bind：属性 = "xxx",对于标签的class属性 v-bind：class = "{class名：对应数据属性data }"

Vue中的简化写法：v-bind：属性名 ==> : 属性名 v-on:click ==> @click

备注：

1.ES5和ES6中在Vue中函数的写法：

　　ES5: clickHandler : function(){ } 等价于 ES6：clickHandler(){ } #这种形式叫 对象的单体模式

2.a标签的默认事件：点击之后会默认的刷新页面

　　阻止a标签的默认事件的方式：1 <a href="javascript:;" @click="clickhand">点击</a> 或者 <a href="javascript:void(0);"></a>

a标签绑定事件时，会先走绑定的事件，在执行跳转，我们可以在这个事件中来阻止这个跳转操作

　　所有的事件都会传入一个事件对象，所以第二种阻止a标签默认事件的方式：clickhand(e){e.preventDefault();}（这种方式也可以用来阻止submit的默认事件：重新加载页面）

　　阻止form表单提交的默认事件（页面的刷新跳转），在form表单中使用 <form action="" onsubmit="return func()">，然后在form上面定义func

<script>
function func(){
return false;
}
</script>

　　Vue中也提供了一种阻止默认事件的方式：事件修饰符 @click.prevent = "xxx"

备注：使用Vue写的官网有：掘金（juejin）使用react写的：豆瓣、网易云音乐

v-for 的用法：v-for的优先级是最高的。

v-for的两种形式实现图片的切换： v-for = "item in [....]" / v-for = "(item,index) in [...]"

<div id="app">
 
    <img :src="firstimg" alt="">
    <ul>

<li v-for = '(item,index) in imgs' @click = 'changeimg(index)' :class = "{active:index==current}">图片{{ item.id }}</li>
<!--<li v-for = 'item in imgs' @click = 'changeimg(item)' >图片{{ item.id }}</li>-->

</ul> </div> <script src="vue.js"></script> <script> var imgs = [{id:1,src:'1.jpg'},{id:2,src:'2.jpg'},{id:3,src:'3.jpg'},{id:4,src:'4.jpg'}]; var options = { el:'#app', data:{ imgs:imgs, firstimg:'1.jpg',
　　　　　　　 current:0

        },
        methods:{
            changeimg:function (item) {

　　　　　　　　this.firstimg = this.imgs[item].src;
　　　　　　　　this.current = item;

　　　　　　　　// this.firstimg = item.src;

} } }; var app = new Vue(options);

备注：所有的标签都有title属性（鼠标悬停上去显示的信息）

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

computed的使用

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}


v-model的内部实现原理：

<form id="app">
        <input type="text" :value='msg' @input = 'change'>
        <p>{{currentMsg}}</p>
    </form>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                msg:'双向数据绑定'
            },
            methods:{
                change(e){
                    console.log(e.target.value);
                    this.currentMsg = e.target.value;
                }
            },
            computed:{
                currentMsg:{
                    get:function(){
                        return this.msg
                    },
                    set:function(newValue){
                        this.msg = newValue;
                    }
                }
            }
        })

    </script>

备注：input事件默认接收一个参数，这个参数有个属性： e.target.value 就可以获取到当前输入的值，注意：在input事件后的函数或方法中不能用括号去接收这个值。

js中的全局变量是：window

v-html的用法：

　　双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

所以v-html用于将HTML的文本直接转义为真正的HTML。

posted @ 2018-09-29 16:50 一抹浅笑阅读(823) 评论(0) 编辑收藏举报

刷新页面返回顶部

一抹浅笑