vue-day01

最新推荐文章于 2024-05-06 20:52:53 发布

寻找java养生之道

最新推荐文章于 2024-05-06 20:52:53 发布

阅读量166

点赞数

分类专栏： ssm架构文章标签： vue js html nodejs javascript

本文链接：https://blog.csdn.net/w1184394406/article/details/103747796

版权

ssm架构专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1前端回顾

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-eGzSGmin-1577533357580)(笔记.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; // 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

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

<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>

(3)测试代码

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

3.3 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>

3.4 data数据(掌握)

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

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

3.5 methods方法(掌握)

方法methods:

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

3.6 Vue生命周期

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

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

created:(掌握)

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

mounted:(掌握) – window.onload

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

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

3.7 数据的双向绑定初体验

<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>

4 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>"
            }

        }
    });

5 vue指令-v-for(重点)

循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="dlg">
        循环数组
        <ul>
        <li v-for="hobby in hobbys">
            {{hobby}}
        </li>
    </ul>
        <hr>

        循环对象
        <ul>
            <li v-for="user in user">
                {{user}}
            </li>
        </ul>
        <hr>
        带索引循环数组
        <ul>
            <li v-for="(hobby,index) in hobbys">
                {{hobby}}---------{{index}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(hobby,index) in hobbys1">
                {{hobby}}---------{{index}}
            </li>
        </ul>
        <hr>
        循环对象value key  index
        <ul>
            <li v-for="(value,key,index) in user">
                {{key}} ---- {{value}} ---- {{index}}
            </li>
        </ul>
        <hr>
        循环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>
    new Vue({ 
        el:"#dlg",
        data: {

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

</script>

</body>
</html>

6 vue 指令 -v-bind(重点)

绑定的标签里面属性的值

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="dlg">
        <img width="100" src="img/11.jpg">
        <img width="100" v-bind:src="imgSrc">
        <img width="100" :src="imgSrc">
        <input type="text" name="username">
        <input v-bind="props"/>
    </div>

<script>
    new Vue({
       el:"#dlg",
        data: {
            imgSrc:"img/11.jpg",
            props:{
                type:"text",
                name:"username"
            }
        }
    });

</script>

</body>
</html>

7 vue 指令 -v-show(重点)

控制display这个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="dlg">
        <div v-show="show">撒低级啊是多久啊拉开圣诞节?</div>
        <div v-show="hidden">撒低级啊是多久啊拉开圣诞节?</div>
        <div v-show="score>80">撒低级啊是多久啊拉开圣诞节?</div>
    </div>

<script>
    new Vue({
       el:"#dlg",
        data:{
            data: {
                "show":true,
                "hidden":false,
                "score":90
            }
        }
    });

</script>

</body>
</html>

8 vue 指令 -v-if/else(重点)

如果不成立 ,在页面无法看到

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- false :v-show控制display属性  v-if 不显示 -->
    <!--  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<50">撒大苏打</div>
    <div v-else>按时打卡上来看大家了</div>

</div>


<script>

    //v-text等效于innerText /v-html 等效于 innerHTML
    var app = new Vue({
        el:"#app",
        data: {
            "show":true,
            "hidden":false,
            "age":20,
        }


    });

</script>

</body>
</html>

9 vue 指令 -v-model(重点)

控制标签里面value 完成双向绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

    <div id="dlg">
        (1)绑定普通的字符串值
        <input v-model="inputValue">
        {{inputValue}}
        <hr>

        (2)绑定到type=checkbox的input表单元素
        <br>
        打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
        踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
        data中的值:{{checkboxValue}}
        <hr>

        (3)绑定到type=radio的input表单元素
        <br>
        打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
        踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
        data中的值:{{radioValue}}
        <hr>

        (4)绑定到文本域的值
        <br>
        <textarea v-model="textAreaValue"></textarea>
        data中的值:{{textAreaValue}}
        <hr>
        (5)下拉的值
        <br>
        <select v-model="skills">
            <option value="rap">rap</option>
            <option value="唱">唱</option>
            <option value="跳">跳</option>
        </select>
        <hr>
    </div>

<script>
    new Vue({
       el:"#dlg",
        data: {
            inputValue:"你好不好!",
            checkboxValue:["踢足球"],
            radioValue:"打篮球",
            textAreaValue:"丁靖和杰哥是同桌",
            skills:"唱"

        }
    });

</script>

</body>
</html>

寻找java养生之道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-day01

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

扫一扫