vue-01

最新推荐文章于 2022-02-11 14:33:24 发布

Dylanyj

最新推荐文章于 2022-02-11 14:33:24 发布

阅读量141

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/Dylanyj/article/details/103748381

版权

1.1 前端的发展史(了解)

1)html(超文本标记语言) + css(层叠样式表) +js ----> 静态页面

2)jsp(javaee)/asp(.net)/php -->动态页面

3)ajax–> 局部刷新异步请求

同步: (线程) 一个程序执行完之后,才能执行另外一个程序

异步: 不用等待上一个程序执行,并行执行其他内容

局部刷新: 不是整个页面去刷新,只刷新局部

怎么实现局部刷新原理: 异步操作的时候,有回调函数,通过这个回调函数来完成局部刷新

4)jquery --> 它是js的框架 js封装出来的框架 write less do more

5)h5(html5)

6)nodejs(相当js的后台服务) /npm(maven) --很多很多框架

1.2 MVVM(理解)

MVC : model(模型) view(视图) controll(控制器)

MVVM : model view view-model -->数据的双向绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Rkkv3uQ-1577537082085)(笔记.assets/image-20191228093714293.png)]

1.3 前端的框架说明

Vue.js:vue.js以轻量易用著称

React.js:vue.js和React.js发展速度最快，集web前端与app于一身技术

AngularJS: AngularJS还是曾今老大。用户比较比多

1.4 nodejs和npm环境(掌握)

傻瓜式安装 – 卸载在安装

2 ES6

ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范

ES6就是javascript用的最多语言规范.被各个浏览器实现了.

2.1 ES6的语法(掌握)

(1)语法1 (掌握)

let相较于var，他是块级的。

// (1)let 它是块级 局部变量, var 不是块级  全局变量
for(var i=0;i<10;i++){
    console.log(i);
}
console.log("------i----------")
console.log(i);
console.log("============")
for(let j=0;j<10;j++){
    console.log(j);
}
console.log("------j----------")
console.log(j);

(2)const 一旦有值就不能修改(掌握)

// const i=10;
//i=11;

(3)解构表达式(掌握)

/**
 * (3)解构表达式 -数组结构
 */
let  arr = [1,2,3];
//解构表达式
let  [a1,a2,a3]=arr;
console.log(a1,a2,a3);
console.log(a3);

//对象解构
 *let  obj={"name":"亚索","age":18};

 let(name,age)=obj;
 console.log(name+"年龄是:"+age);

4)箭头函数(掌握)

var  obj ={
     eat:function () {
         console.log("陈琨吃翔");
     },
    eat1(){
        console.log("陈琨早上喝奶")
    },
    eat2:(food)=>{
        console.log("陈琨晚上吃"+food+"不用牙齿吃")
    }
}

obj.eat();
obj.eat1();
obj.eat2("香蕉");*/

console.log("--------");
/*
 * 箭头+解构一起使用
 */
var say = ({name})=> console.log("我是"+name);
var obj1 = {
    name:"亚索"
}
say(obj1);
 * (5)语法 发送请求 成功执行内容 失败执行内容 (callback) axios
 * // this.axios.get(url,param)=>(res){}

const p = new Promise((resolve, reject) =>{
    // 这里我们用定时任务模拟异步
    setTimeout(() => {
        const num = Math.random();
        // 随机返回成功或失败
        if (num < 0.5) {
            resolve("成功！num:" + num)
        } else {
            reject("出错了！num:" + num)
        }
    }, 300)
}).then(function (msg) {
    console.log(msg);
}).catch(function (msg) {
    console.log(msg);
})

5)模块化(今日了解–后面掌握用法)

import / export
/*
(1)
import util from '02_import'
util.sum();*/

// (2)import {name,age} from '02_import'

//(3) defautl导入
import xxx from '02_import';
xxx.sum();

3 Vue

3.1 什么是Vue

(1)Vue是构建界面的渐进式的js框架

(2)只关注视图层，采用自底向上增量开发的设计。

(3)Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 --数据双向绑定

一句话:vue就是做界面的js框架 (jquery/easyui)

3.2 vue怎么使用(掌握)

(1)在项目里面运行 npm install vue

(2)在页面引入vue.js

(3)测试代码

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


<script>
    new Vue({
        el:"#app",
        data:{
            name:"托儿索"
        }
    });

</script>

3.3 el挂载(掌握)
(1)id的方式进行挂载

<div id="app">
    {{name}}
</div>
<div class="app1">
    {{name1}}
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            name:"托儿索"
        }
    });

    new Vue({
        el:".app1",
        data:{
            name1:"儿童劫"
        }
    });
</script>

3.4 data数据(掌握)

data:放字符串对象和数组都OK

  var app = new Vue({
        el:"#app",
        data: {
            name: "陈琨",
            user: {
                name: "琨",
                age: 18,
                hobby: ["打野"]
            }
        },

3.5 methods方法(掌握)

方法methods:

 var app = new Vue({
        el:"#app",
        data: {
            name: "陈琨",
            user: {
                name: "琨",
                age: 18,
                hobby: ["打野"]
            }
        },
        methods:{
            eat(food){
                console.log("陈琨今天中午吃"+food)
            },
            drink(){
                console.log("陈琨今天中午喝什么呀")
            },

3.6 Vue生命周期

vue对象从出生到死亡经过这个过程就叫生命周期

vue生命周期里面钩子方法:

created:(掌握)

表示创建完vue对象的时候,执行内容

mounted:(掌握)

表示页面所有的内容加载完之后,执行内容

 var app = new Vue({
        el:"#app",
        data: {
            name: "陈琨",
            user: {
                name: "琨",
                age: 18,
                hobby: ["打野"]
            }
        },
        methods:{
            eat(food){
                console.log("陈琨今天中午吃"+food)
            },
            drink(){
                console.log("陈琨今天中午喝什么呀")
            },
            getEmloyees(){
                console.log("发送请求查询员工")
            }
        },
        created(){
            //创建完之后 执行该内容
            console.log("--------11111111---")
        },
        mounted(){
            //渲染完之后 执行该内容
            console.log("--------222222222---");
            this.getEmloyees();
        }
    });

钩子环节

created创建对象 --> 渲染标签内容 – >mounted挂载完 -->destory销毁

重点:

created/mounted

3.7 数据的双向绑定初体验

  <!-- 引入vue.js-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg" v-on:change="changeData"/>
    {{msg}}
</div>
<script>
     var app = new Vue({
         el:"#app",
             data: {
             name: "劫",
                 msg:"test"
         },
         methods: {
             changeData(){
                 console.log(this.msg);
             }

         }

     });

</script>

3.8 vue的表达式

   <!--简单表达式  -->
    <!--<h1>{{5+5}}</h1>-->
    <!-- +:运算，字符串连接 -->
    <!--<h1>{{5+"v5"}}</h1>
    <h1>{{5+"5"}}</h1>
    &lt;!&ndash; -：减法 &ndash;&gt;
    <h1>{{"5"-"5"}}</h1>
    <h1>{{5*5}}</h1>
    &lt;!&ndash; *:乘 &ndash;&gt;
    <h1>{{"5"*"5"}}</h1>
    &lt;!&ndash; / 除&ndash;&gt;
    <h1>{{5/5}}</h1>-->

    <!--{{show?"男":"女"}}-->
    <!--字符串操作-->
    <!--        {{"这是字面值"}}<br/>
            {{"这是字面值".length}}<br/>
            {{message.length}}
            {{message.substring(0,5)}}
            {{message.substring(0,5).toUpperCase()}}
            {{message1.substring(0,5).toUpperCase()}}-->

    <!--对象操作-->
    <!--   {{user.name}}
       {{user.age}}-->

    <!--{{user}} &ndash;&gt;默认调用toString方法-->
    <!---->
    <!-- {{JSON.stringify(user)}}
     {{user.toString()}}-->

    <!--数组操作 js-->
    {{hobbys}}
    <br/>
    {{hobbys[0]}}
    <br/>
    {{hobbys.toString()}}
    <br/>
    {{hobbys.length}}
    <br/>
    {{hobbys.join("&&")}}
</div>


<script>
    var user1 = {
        name:"劫",
        age:18,
        getAge:function(){
            console.log("我的年龄是"+this.age);
        },
        toString(){
            console.log(this.name+"今年"+this.age);
            return this.name;
        }
    }
    var app = new Vue({
        el:"#app",
        data: {
            name: "劫",
            msg:"test",
            show:false,
            message:"打野",
            message1:"tgandjgisfirends",
            user:user1,
            hobbys:["打游戏","吃","喝"]
        }


    });
    </script>

4 vue指令-v-text/v-html

指令:vue提供的特殊的标签属性 , 不同的指令会产生不同的效果

v-text指令

  //v-text等效于innerText /v-html 等效于 innerHTML
    var app = new Vue({
        el:"#app",
        data: {
            name: "<h1>劫</h1>",
            user:{
                name:"<h2>亚索</h2>"
            }

        }

v-html指令(重点)

<div id="app">
    <div v-html="message"></div>
</div>

var app = new Vue({
	el: "#app",
	data: {
		message: "<h1>这是HTMl代码</h1>"
	}
});

v-for指令(重点


``<div id="app">
    循环数组
    <ul>
        <li v-for="hobby in hobbys">
            {{hobby}}
        </li>
    </ul>
    循环对象
    <hr>
    <ul>
        <li v-for="u in user">
            {{u}}
        </li>
    </ul>
    <hr>
    d带索引循环数组
    <ul>
        <li v-for="(hobby,index) in hobbys">
            {{hobby}}---{{index}}
        </li>
    </ul>
    循环对象value key index
    <hr>
    <ul>
        <li v-for="(value,key,index) in user">
            {{key}} ---- {{value}} ---- {{index}}
        </li>
    </ul>
    循环json数据
    <table>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
        </tr>
        <tr v-for="student in students">
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.age}}</td>
            <td>{{student.sex}}</td>
        </tr>
    </table></div>


<script>

    //v-text等效于innerText /v-html 等效于 innerHTML
    var app = new Vue({
        el:"#app",
        data: {

            user:{
                name:"劫",
                age:18,
                sex:"female"
            },
            hobbys:["打野","吃","打篮球","喝饮料"],
            students: [
                {id:1,name: "刘备", age: 29, sex: "男"},
                {id:2,name: "貂蝉", age: 30, sex: "女"},
                {id:3,name: "吕布", age: 31, sex: "男"}
            ]

        }


    });`

v-bind指令(重点)

<div id="app">
    <!-- v-bind可以绑定标签里面的属性的值 比如src title-->
    <img width="100" src="img/1.gif">
    <img width="100" v-bind:src="imgSrc">
    <img width="100" :src="imgSrc">
    <input type="text" name="username">
    <input v-bind="props"/>

</div>
<script>
    //v-text等效于innerText /v-html 等效于 innerHTML
    var app = new Vue({
        el: "#app",
        data: {
            imgSrc: "img/1.gif",
            props: {
                type: "text",
                name: "username"
            }

        }
    });
</script>

v-model 指令(重点)

<div id="app">
    <!--   v-model 控制 标签的value值 完成双向绑定
          v-bind  控制 标签里面的属性的值 比如 img src tile-->
    (1)绑定普通的字符串
    <input v-model="inputValue"/>
    {{inputValue}}
    (2)
    <h1>绑定到type-checkbox的input表单元素</h1>
    打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
    踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
    data中的值:{{checkboxValue}}
   （3）
    <h1>绑定到type=radio的input表单元素</h1>
    打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
    踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
    data中的值:{{radioValue}}
（4）
    <h1>绑定到文本域的值</h1>
    <textarea v-model="textAreaValue"></textarea>
    data中的值:{{textAreaValue}}

    (5)下拉的值
    <select v-model="skills">
        <option value="唱">唱</option>
        <option value="跳">跳</option>
        <option value="rap">rap</option>

    </select>
    {{skills}}
</div>
<script>
    //v-text等效于innerText /v-html 等效于 innerHTML
    var app = new Vue({
        el: "#app",
        data: {
         inputValue:"hello",
            checkboxValue:["打篮球"],
            radioValue:"打篮球",
            textAreaValue:"好基友",
            skills:"rap",
            }


    });
</script>

v-show指令

<div id="app">
    <div v-show="show">你看的见我不?</div>
    <div v-show="hidden">你看的见我不?</div>
    <div v-show="score>80">你看的见我不?</div></div>
<script>
    //v-show控制 display :如果等于false display:none
    var app = new Vue({
        el: "#app",
        data: {
         "show":true,
            "hidden":false,
            "socre":40,
        }


    });

</script>

v-if指令

<div id="app">
    <!-- false :v-show控制display属性  v-if 不显示 -->
    <div v-if="age<18">未成年</div>
    <div v-if="age>18">成年</div>
    <!--if -else-->
    <div v-if="age < 18">未成年</div>
    <div v-else>成年了</div>
            <!-- if elseif elseif  else-->
    <div v-if="age < 18">未成年</div>
    <div v-else-if="age>18 && age<68 ">成年了</div>
    <div v-else>要 </div>

<script>
    //v-show控制 display :如果等于false display:none
    var app = new Vue({
        el: "#app",
        data: {
         "show":true,
            "hidden":false,
            "socre":40,
        }


    });

</script>