vue（一）

最新推荐文章于 2022-05-30 00:29:15 发布

RipperQAQ

最新推荐文章于 2022-05-30 00:29:15 发布

阅读量147

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/RipperQAQ/article/details/103749306

版权

vue

前端的发展史

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) --很多很多框架

MVVM

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

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

ES6

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

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

ES6的语法

(1)let 它是块级局部变量, var 不是块级全局变量

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)解构表达式(

/*
let arr = [1,2,3];
//解构表达式
let [a1,a2,a3]=arr; // let a1 = arr[0],a2=arr[1]
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)模块化
import / export

什么是Vue

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

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

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

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

vue的使用

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

(2)在页面引入vue.js

(3)测试代码

<body>
    <div id="app">
        {{name}}
    </div>
<script>
    new Vue({
       el:"#app",
        data:{
           name:"xxxx"
        }
    });
</script>

el挂载

el:挂载,把vue这个对象挂载到对应的标签上面去

el方式:

(1)id的方式进行挂载

<body>
    <div id="app">
        {{name}}
    </div>
<script>
    new Vue({
       el:"#app",
        data:{
           name:"xxxx"
        }
    });
</script>

(2) class方法进行挂载

<body>
    <div class="app">
        {{name}}
    </div>
<script>
    new Vue({
       el:".app",
        data:{
           name:"xxxx"
        }
    });
</script>

data数据

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

 var app = new Vue({
        el:"#app",
        data:{
            name:"xxxx",
            user:{
               name:"信信",
                age:18,
                hobby:["和何亮打野","和金国打野"]
            }
        }
    });

methods方法

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

Vue生命周期

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

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

created:(掌握)

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

mounted:(掌握)

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

var app = new Vue({
        el:"#app",
        data: {
            name: "xxxx",
            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

数据的双向绑定

<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: "xxxx",
            msg:"test"
        },
        methods: {
            changeData(){
                console.log(this.msg);
            }

        }

    });

</script>

</body>

vue指令-v-text/v-html

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

<span v-text="name"></span>
        <span v-text="user.name"></span>
        <span v-html="user.name"></span>

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

        }
    });

RipperQAQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue（一）

vue前端的发展史1)html(超文本标记语言) + css(层叠样式表) +js ----> 静态页面2)jsp(javaee)/asp(.net)/php -->动态页面3)ajax–> 局部刷新异步请求同步: (线程) 一个程序执行完之后,才能执行另外一个程序异步: 不用等待上一个程序执行,并行执行其他内容局部刷新: 不是整个页面去刷新,只刷新...
复制链接

扫一扫