vue.js

vue.js 笔记

ES6语法

1. let const

js定义变量只有一个关键字:var

var有一个问题,就是定义的变量有时会莫名奇妙的成为全局变量。

例如这样的一段代码:

for(var i = 0; i < 5; i++){
    console.log(i);
}
console.log("循环外:" + i)

i最后一次打印值为5

let所声明的变量,只在let命令所在的代码块内有效。

const声明的变量是常量,不能被修改

String 新增方法

  • includes():返回布尔值,表示是否找到了参数字符串。

  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。

  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。

    直接String类打点使用

    var str =“test”; str.使用

字符串模板

​ 在两个`之间的部分都会被作为字符串的值,不管你任意换行,甚至加入js脚本

解构表达式

1. 数组解构

let arr = [1,2,3]
const [x,y,z] = arr;// x,y,z将与arr中的每个位置对应来取值
// 然后打印
console.log(x,y,z);

2. 对象解构

const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}
// 解构表达式获取值
const {name,age,language} = person;
// 打印
console.log(name);
console.log(age);
console.log(language);

注意解构时对应的名字必须一样。

别名

const {name:n} = person;
打印n就显示的是person的name值

函数优化

1. 赋默认值

 function add(a , b) {
        // 判断b是否为空,为空就给默认值1
        b = b || 1;
        return a + b;
    }
    // 传一个参数
    console.log(add(10));

b = b || 1; 当b不为空时,b = b 。否则就等于1

function add(a , b = 1) {
    return a + b;
}
// 传一个参数
console.log(add(10));

直接在方法参数处赋默认值

2. 箭头lamba函数

一个参数时:

var print = function (obj) {
    console.log(obj);
}
// 简写为:
var print2 = obj => console.log(obj);

多个参数:

// 两个参数的情况:
var sum = function (a , b) {
    return a + b;
}
// 简写为:
var sum2 = (a,b) => a+b;

代码不止一行,可以用{}括起来

var sum3 = (a,b) => {
    let c = a+b;
    return c;
}

和解构表达式结合

var hi = ({name}) =>  console.log("hello," + name);

map和reduce

1. map

数组方法。a数组.map(方法) 将a数组按该方法修改后,值给a数组

let arr = ['1','20','-5','3'];
console.log(arr)

arr = arr.map(s => parseInt(s));
console.log(arr)

vue.js

  • M:即Model,模型,包括数据和一些基本操作
  • V:即View,视图,页面渲染结果
  • VM:即View-Model,模型与视图间的双向操作(无需开发人员干涉)

初始化vue项目

​ 使用npm来操作。

  1. 进入hello-vue目录,先输入:npm init -y 进行初始化
  2. 安装Vue,输入命令:npm install vue --save

简单入门

<body>
    <div id="test">
        <h2>{{name}},非常帅!!!h2>
    div>
body>
<script src="node_modules/vue/dist/vue.js" >script>
<script>
    // 创建vue实例
    var vuejs = new Vue({
        el:"#test", // el即element,该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "峰哥"
        }
    });

script>

双向绑定

<body>
    <div id="app">
        <input type="text" v-model="num">
        <h2>
            {{name}},非常帅!!!有{{num}}位女神为他着迷。
        h2>
    div>
body>
<script src="node_modules/vue/dist/vue.js" >script>
<script>
    // 创建vue实例
    var app = new Vue({
        el: "#app", // el即element,该vue实例要渲染的页面元素
        data: { // 渲染页面需要的数据
            name: "峰哥",
            num: 5
        }
    });

script>

在页面中有一个input元素,通过v-modelnum进行绑定。

添加一个按钮,可以直接操作num数组。而不需要去绑定dom

vue 详解

1. 模板或元素

这里的id给vue实例的el获取匹配。该vue实例只能控制这一个div

例如一段html模板:

<div id="app">
    
div>

然后创建Vue实例,关联这个div

var vm = new Vue({
	el:"#app"
})

这样,Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

2. v-model

在html语句中添加,vue可以实时监测数据的变化并渲染数据。

html:

<div id="app">
    <input type="text" v-model="name"/>
div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        name:"刘德华"
    }
})
  • name的变化会影响到input的值
  • input中输入的值,也会导致vm中的name发生改变

3. 绑定事件以及函数

html:

<div id="app">
    {{num}}
    <button v-on:click="add">button>
div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        num: 0
    },
    methods:{
        add:function(){
            // this代表的当前vue实例
            this.num++;
        }
    }
})

vue生命周期,钩子函数

  • beforeCreated:我们在用Vue时都要进行实例化,因此,该函数就是在Vue实例化时调用,也可以将他理解为初始化函数比较方便一点,在Vue1.0时,这个函数的名字就是init。
  • created:在创建实例之后进行调用。
  • beforeMount:页面加载完成,没有渲染。如:此时页面还是{{name}}
  • mounted:我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery,所以也可以理解为jquery中的$(document).ready(function(){….}),他的功能就是:在dom文档渲染完毕之后将要执行的函数,该函数在Vue1.0版本中名字为compiled。
  • beforeDestroy:该函数将在销毁实例前进行调用 。
  • destroyed:改函数将在销毁实例时进行调用。
  • beforeUpdate:组件更新之前。
  • updated:组件更新之后。

{{}}插值表达式

使用v-text和v-html指令来替代{{}}

  • v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
  • v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染

HTML:

<div id="app">
    v-text:<span v-text="hello">span> <br/>
    v-html:<span v-html="hello">span>
div>

JS:

var vm = new Vue({
    el:"#app",
    data:{
        hello: "

大家好,我是峰哥

"
} })

可以避免出现插值闪烁

v-model 双向绑定

​ 双向绑定,就是说可以直接在视图上改数据(比如选择框,表单)

  • input
  • select
  • textarea
  • checkbox
  • radio
  • components(Vue中的自定义组件)
<div id="app">
    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
    <h1>
        你选择了:{{language.join(',')}}
    h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            language: []
        }
    })
script>

v-on 事件绑定

<div id="app">
    
    <button v-on:click="num++">增加一个button><br/>
    
    <button v-on:click="decrement">减少一个button><br/>
    <h1>有{{num}}个女神h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            num:100
        },
        methods:{
            decrement(){
                this.num--;
            }
        }
    })
script>

你可能感兴趣的:(框架学习)