Vue

------------恢复内容开始------------

1. css

在这里插入图片描述

2. JavaScript

github链接

在这里插入图片描述

2.1. 调试

// 在浏览器的控制台打印变量
console.log(num);

在这里插入图片描述

2.2. 数据类型

Number

// js不区分小数和整数 Number
123		// 整数
123.1	// 浮点数
1.123e3	// 科学计数法
-99 	// 负数
NAN		// not a number
Infinity // 无限大

字符串

'abc'
"abc"

// 转义字符
	


u4e2d		// u#### Unicode字符
x41		//	Ascll字符

// 多行字符串
let msg = `我爱你，
中国！`

// 模板字符串（必须在多行字符串的引号里面）
<script>
    'use strict'

    let name = "张三"
    let msg = `你好呀, ${name}`
    console.log(msg)
</script>

布尔值

true
false

逻辑运算

&& || !

比较运算符

= 		// 赋值
==		// 等于(类型不一样，值一样，也会判断为true)
===		// 绝对等于(类型一样，值一样， 结果true)

NaN === NaN	// false
isNaN(NaN)	// true

null 和 undefined

null		// 空
undefined	// 未定义

数组

let arr = [1,2,'a', "hello", null, true]	// 数组越界之后 就是 undefined

arr.length	//	数组长度
arr.indexOf(2)	// 下标索引
arr.slice()	// 切片
arr.push()	// 压入到尾部
arr.pop()	// 弹出尾部的一个元素
arr.shift()	// 压入到头部
arr.unshift() // 弹出头部的一个元素
arr.sort() // 排序
arr.join() // 使用特定的字符拼接数组成字符串
arr.concat() // 拼接数组
...

对象

JavaScript中的所有的键都是字符串，值是任意对象！

var person = {
    name: "xiaofan",
    age: 3,
    tags: ['js', 'java','web', '...']
}

// 对象赋值
person.sex = 'nv'
// 使用不存在的对象属性
person.hobby
undefined
// 动态删减属性
delete person.name
// 动态添加属性
person.info = 'info';
// 判断属性值是否在这个对象中 'xxx' in xxx!
'age' in person  (person.hasOwnProperty('age'))

2.3. 严格检查模式

在这里插入图片描述

2.4. 流程控制

let arr = [100, 200, 'a', 'b', true]

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}
console.log("============")

for (let i in arr) {
    console.log(arr[i])
}
console.log("============")
for (let arrElement of arr) {
    console.log(arrElement)
}

console.log("============")
arr.forEach(function (e){
    console.log(e)
})

2.5. Map 和 Set

<script>
    "use strict"
    let map = new Map([['tom', 1000],['jack', 999],['Bob', 888]])
    let score = map.get('tom')
    console.log(score)
    map.set('admin', 123456)
    map.delete("tom")

    let set = new Set([1,2,3,4,5])
    set.delete(1)
    console.log(set.has(3))

    console.log("======")
    for (let number of set) {
        console.log(number)
    }

</script>

注意：遍历arr的时候 for .. in 和for.. of 的区别

在这里插入图片描述

2.6. 函数

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

    <script>
        // 定义方式1
        function f1(x) {
            console.log(typeof x)
            if (x >= 0) {
                return x
            } else {
                return -x
            }
        }

        // 定义方式2
        // typeof 检测变量的类型
        let f2 = function (x) {
            // 手动抛出异常
            if (typeof x !== "number") {
                throw "Not a num!"
            }
            if (x >= 0) {
                return x
            } else {
                return -x
            }
        };

        // arguments 获得所有参数
        function f3(x) {
            console.log(x)
            console.log(typeof x)
            console.log("=====")
            console.log(arguments)

        }

        // ...rest 标识， 获取剩余的参数
        function f4(x, ...rest1) {
            console.log(x)
            console.log(typeof x)
            console.log("=====")
            console.log(rest1)
        }

    </script>
</head>
<body>

</body>
</html>

2.7. 变量的作用域

在这里插入图片描述

JQuery. ===> $()

在这里插入图片描述

2.8. 方法

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

    <script>
        'use strict'
        // 方法1
        let xf1 = {
            name: '小范',
            birth: 1991,
            // 方法
            age: function () {
                let now = new Date().getFullYear();
                // this 指向调用它的对象
                return now - this.birth;
            }
        }

        // 方法2
        function getAge() {
            let now = new Date().getFullYear();
            // this 指向调用它的对象
            return now - this.birth;
        }

        let xf2 = {
            name: '小范儿',
            birth: 2000,
            age: getAge
        }

        // xf2.age()    ok
        // getAge()     error
        // apply 改变了getAge方法中this的指向
        let result1 = getAge.apply(xf1, []);
        let result2 = getAge.apply(xf2, []);
        console.log(result1, result2)

    </script>
</head>
<body>

</body>
</html>

2.9. 内部对象

// 标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

2.9.1. Date

// Date
<script>
    let now = new Date();
    now.getFullYear();
    now.getMonth();     // 0~11月
    now.getDate();      // 日
    now.getDay();
    now.getHours();
    now.getMinutes();
    now.getSeconds();

    now.getTime();      // 获取时间戳

    now.toLocaleString()

    now.toUTCString()
</script>

2.9.2. JSON

<script>
    'use strict'
    let user = {
        name: "xiaofan",
        age: 3,
        set: '男'
    }
    // 对象转化为json字符串
    let jsonUser = JSON.stringify(user);
    // Json字符串转换成对象
    let userBean = JSON.parse('{"name":"xiaofaner","age":28,"set":"男"}');
</script>

2.9.3. Ajax

原生的js写法， xhr异步请求
jQuery封装好的方法 $("#name").ajax("")
axios 请求

2.10 面向对象编程

面向对象原型继承

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

    <script>
        'use strict'
        let student = {
            name: "qinjiang",
            age: 3,
            run: function () {
                console.log(this.name + " run...")
            }
        };

        let xf = {
            name: "xiaofan"
        }

        // xf 的原型对象是 student
        xf.__proto__ = student

        // 给ss新增加一个方法
        function ss(name) {
            this.name = name;
        }

        ss.prototype.hello = function () {
            alert("hello")
        }
        
    </script>
</head>
<body>

</body>
</html>

面向类继承

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

    <script>
        'use strict'
        class Student {
            constructor(name) {
                this.name = name;
            }

            hello() {
                alert('hello student..');
            }
        }

        class SmallStudent extends Student {
            constructor(name, grade) {
                super(name);
                this.grade = grade;
            }

            myGrade() {
               alert("我是个小学生..");
            }
        }

        let student = new Student("xiaofan")
        let smallStudent = new SmallStudent("xiaofaner", 22)
    </script>
</head>
<body>

</body>
</html>

本质：还是原型

在这里插入图片描述

原型链

2.11. 操作BOM对象

BOM（Browser Object Model）: 浏览器对象模型

window 浏览器窗口

navigator 封装了浏览器信息

screen 屏幕尺寸

location 代表当前页面的URL信息

host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"

reload()	//重新加载网页
location.assign('https://jd.com')	// 设置新的地址

document 代表当前的页面

在这里插入图片描述

history

history.back()		// 后退
history.forward()	// 前进

2.12. 操作DOM对象（核心）

DOM：文档对象模型
获得节点

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

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>


<script>
    let h1 = document.getElementsByTagName("h1");
    let p1 = document.getElementById("p1");
    let p2 = document.getElementsByClassName("p2");
    let father = document.getElementById("father");
    let children = father.children  // 获取父节点下的所有子节点
    father.lastChild
    father.firstChild
</script>
</body>
</html>

更新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="id1"></div>

    <script>
        let div = document.getElementById("id1")
        // 操作文本
        div.innerText = "123";
        div.innerHTML = "<strong>123</strong>"
        // 操作JS
        div.style.color='red'
        div.style.fontSize='22px'
        div.style.padding='2em'
    </script>
</body>
</html>

删除结点

在这里插入图片描述

插入结点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="js">JavaScript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>

    <script>
        let js = document.getElementById('js');
        let list = document.getElementById('list');
        // 追加节点
        // list.appendChild(js)
        let newP = document.createElement('p');
        newP.id='newP';
        newP.innerText = 'Hello xiaofan!';
        list.appendChild(newP)
        // 设置背景色
        let body = document.getElementsByTagName("body")[0];
        body.style.backgroundColor = "#ff00f0"
        // 把一个新节点插入到一个结点的前面
        let ee = document.getElementById("ee");
        list.insertBefore(js, ee);

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

2.13. 操作表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form method="post">
        <p>
            <span>用户名：</span><input type="text" id="username"/>
        </p>
        <p>
            <span>性别：</span>
            <input type="radio" name="sex" value="1" id="boy" checked /> 男
            <input type="radio" name="sex" value="2" id="girl" /> 女
        </p>
    </form>

    <script>
        let input_text = document.getElementById("username");
        let boy = document.getElementById("boy");
        let girl = document.getElementById("girl");
        console.log(boy.checked);
        boy.checked = true
    </script>
</body>
</html>

隐藏域表单提交验证，对密码进行加密

// md5远程库 https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--md5工具类-->
    <script src="myMd5.js"></script>
</head>
<body>
    <form method="post" onsubmit="return check();">
        <p>
            <span>用户名：</span><input type="text" id="username" name="username"/>
        </p>
        <p>
            <span>密&nbsp;&nbsp;&nbsp;码：</span><input type="password" id="input-password"/>
        </p>
        <input type="hidden" id="md5-password" name="password"/>
        <input type="submit">
    </form>

    <script>
        function check() {
            let name = document.getElementById("username");
            let inputPwd = document.getElementById("input-password");
            let md5Pwd = document.getElementById("md5-password");
            // password.value = md5(password.value)
            md5Pwd.value = md5(inputPwd.value);
            console.log(name.value)
            console.log(inputPwd.value)
            console.log(md5Pwd.value)
            return false
        }
    </script>
</body>
</html>

注意：
1.可以把远程库拷贝到本来！
2.onsubmit绑定一个提交检测的函数，当这个函数返回false时，form表单请求会被拦截，当这个函数返回true时，正常提交表单

3. JQuery

文档
cdn

3.1. 第一个Jquery程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>

<script>
    // 公式  $(选择器).action(方法)
    $("#test-jquery").click(function () {
        alert("hello jquery!")
    })
</script>
</body>
</html>

3.2. 选择器

在这里插入图片描述

3.3. 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

    <style>
        #divMove{
             500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动看看
</div>

<script>
    $("#divMove").mousemove(function (e) {
        $("#mouseMove").text(`x: ${e.pageX}, y: ${e.pageY}`)
    })
</script>
</body>
</html>

3.4. JQuery 操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    // 获取值
    let text1 = $("#test-ul li[name=python]").text();
    let text2 = $("#test-ul li[class=js]").text();
    console.log(text1)
    console.log(text2)
    // 设置值
    $("#test-ul li[class=js]").text("JS");
    // 设置css样式
    $("#test-ul li[name=python]").css({ "color": "#ff0011", "background": "blue" })
    // 元素的显示和隐藏
    $("#test-ul li[name=python]").show()
    $("#test-ul li[name=python]").hide()
    // 更多查看文档
    // https://jquery.cuishifeng.cn/

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

源码之家
Element UI
Ant Design
Bootstrap

3.5. Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
jQuery 不是生产者，而是大自然搬运工。
jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！

3.5.1. 伪造Ajax

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

<script type="text/javascript">
    'use strict'
    window.onload = function(){
        let myDate = new Date();
        document.getElementById('currentTime').innerText = myDate.toLocaleString()
    };

    function LoadPage(){
        let targetUrl = document.getElementById('url').value;
        console.log(targetUrl);
        document.getElementById("iframePosition").src = targetUrl;
    }

</script>

<div>
    <p>请输入要加载的地址：<span id="currentTime"></span></p>
    <p>
        <input id="url" type="text" value="https://www.baidu.com/"/>
        <input type="button" value="提交" onclick="LoadPage()">
    </p>
</div>

<div>
    <h3>加载页面位置：</h3>
    <iframe id="iframePosition" style=" 100%;height: 500px;"></iframe>
</div>

</body>
</html>

3.5.2. Ajax格式

jQuery.ajax(...)
      部分参数：
            url：请求地址
            type：请求方式，GET、POST（1.9.0之后用method）
        headers：请求头
            data：要发送的数据
    contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
          async：是否异步
        timeout：设置请求超时时间（毫秒）
      beforeSend：发送请求前执行的函数(全局)
        complete：完成之后执行的回调函数(全局)
        success：成功之后执行的回调函数(全局)
          error：失败之后执行的回调函数(全局)
        accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
        dataType：将服务器端返回的数据转换成指定类型
          "xml": 将服务器端返回的内容转换成xml格式
          "text": 将服务器端返回的内容转换成普通文本格式
          "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
        "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
          "json": 将服务器端返回的内容转换成相应的JavaScript对象
        "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

项目源代码

4. Vue

在这里插入图片描述

4.1. 第一个Vue程序

idea安装vue插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
    <!--view层 模板-->
    <div id="app">
        {{message}}
    </div>

    <script>
        'use strict'
        /*Model 数据*/
        let vue = new Vue({
            el: "#app",
            data: {
                message: 'hello vue!'
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">鼠标悬浮几秒钟查看此处动态绑定的提示信息！</span>
</div>

<script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            message: 'hello vue!'
        }
    })
</script>
</body>
</html>

4.2. 基础语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else="type==='C'">C</h1>
</div>

<script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            message: 'hello vue!',
            type: 'A'
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <p style='color:blue' v-for="item in items">{{item.message}}</p>
</div>

<script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            message: 'hello vue!',
            type: 'A',
            items: [{message: '小范'},{message: '小梁'},{message: '小红'}]
        }
    })
</script>
</body>
</html>

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <button v-on:click="sayHi">点我</button>
</div>

<script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            message: 'hello vue!',
            type: 'A',
            items: [{message: '小范'},{message: '小梁'},{message: '小红'}]
        },
        methods: {
            sayHi: function () {
                alert(this.message)
            }
        }
    })
</script>
</body>
</html>

双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <input type="text" v-model="message"/> {{message}}
</div>

<script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <select v-model="selected">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    {{selected}}
</div>

<script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            selected: ""
        }
    })
</script>
</body>
</html>

4.3. vue组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <xiaofan v-for="item in items" v-bind:xf="item"></xiaofan>
</div>

<script>
    'use strict'

    Vue.component("xiaofan", {
        // 给组件传递数据需要用props
        props: ['xf'],
        template: '<h1>{{xf}}</h1>'
    })

    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            items: ['java', 'linux', 'python']
        }
    })
</script>
</body>
</html>

4.4. 网络通信Axios

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <!--导入axios-->
    <script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="vue">
    <div>{{info.name}}</div>
    <div>{{info.age}}</div>
    <div>{{info.hobbies}}</div>
</div>

<script type="text/javascript">
    'use strict'

    let vue = new Vue({
        el: '#vue',
        // data: {info: {name: "sss"}},
        data() {
          return {
              //请求的返回参数合适，必须和json字符串一样，但可以省略不需要的
              info: {
                 name: null,
                 age: 0,
                 hobbies: []
              }
          }
        },
        mounted() { // 钩子函数 链式编程
            axios.get('../data.json').then(response=>(this.info=response.data))
            // axios.get("../data.json").then(response=>(console.log(response.data)))
        }
    })
</script>
</body>
</html>

参考链接： https://blog.csdn.net/qq_40359381/article/details/106853936

4.5. 计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <!--导入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="vue">
    <p>currentTime1 {{currentTime1()}}</p>
    <p>currentTime2 {{currentTime2}}</p>
</div>

<script type="text/javascript">
    'use strict'

    let vue = new Vue({
        el: '#vue',
        data: {
            message: "xiaofan"
        },
        methods: {
            currentTime1: function () {
                return Date.now();
            }
        },
        computed: { //计算属性methods computed的方法名不要重名字，对于不经常变化的内容可以通过这种方式进行缓存，更优
            currentTime2: function () {
                console.log(this.message);
                return Date.now();
            }
        }
    })
</script>
</body>
</html>

4.6. 插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <!--导入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoitems" v-bind:item="item"></todo-items>
    </todo>
</div>

<script type="text/javascript">
    'use strict'

    Vue.component("todo-title", {
        props: ["title"],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ["item"],
        template: '<li>{{item}}</li>'
    });
    // slot插槽
    Vue.component("todo", {
        template: '<div>
                    <slot name="todo-title"></slot>
                    <ul>
                    <slot name="todo-items"></slot>
                    </ul>
            </div>'
    });

    let vue = new Vue({
        el: '#vue',
        data: {
            title: "秦老师",
            todoitems: ["狂神说Java", "狂神说Linux", "狂神说Vue", "狂神说Linux", "狂神说Vue"]
        }
    })
</script>
</body>
</html>

4.7. 自定义事件内容分发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <!--导入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item, index) in todoitems" v-bind:item="item" v-bind:index="index" v-on:remove="removeItem(index)" v-bind:key="index"></todo-items>
    </todo>
</div>

<script type="text/javascript">
    'use strict'

    Vue.component("todo-title", {
        props: ["title"],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ["item","index"],
        template: '<li>{{item}}<button v-on:click="remove">删除</button></li>',
        // 只能绑定当前组件的方法
        methods: {
            remove: function (index) {
                // 自定义事件分发 $emit(自定义事件名， 下标)
                this.$emit('remove', index)
            }
        }
    });
    // slot插槽
    Vue.component("todo", {
        template: '<div>
                    <slot name="todo-title"></slot>
                    <ul>
                    <slot name="todo-items"></slot>
                    </ul>
            </div>'
    });

    let vue = new Vue({
        el: '#vue',
        data: {
            title: "秦老师",
            todoitems: ["狂神说Java", "狂神说Linux", "狂神说Vue", "狂神说Linux", "狂神说Vue"]
        },
        methods: {
            removeItem: function (index) {
                this.todoitems.splice(index, 1)
            }
        }
    })
</script>
</body>
</html>

4.8. 第一个vue-cli项目

安装Nodejs 下载地址
node -v
npm -v
安装Node.js淘宝镜像加速器（cnpm）npm install cnpm -g
安装vue-cli cnpm install vue-cli -g
测试是否安装成功
- 查看可以寄语那些模板创建vue应用vue list

在这里插入图片描述

创建项目vue init webpack myvue

在这里插入图片描述

初始化并运行

cd myvue
npm install
npm run dev

在这里插入图片描述

4.9. webpack打包

安装并测试

npm install webpack -g
npm install webpack-cli -g

webpack -v
webpack-cli -v

项目github地址

4.10 vue-router路由

在当前项目安装 npm install vue-router --save-dev
项目github地址

4.11 vue+elementUI

创建工程 hello-vue vue init webpack hello-vue
安装依赖
- 进入工程目录cd hello-vue
- 安装vue-routernpm install vue-router --save-dev
- 安装 element-ui npm i element-ui -S
- 安装依赖npm install
- 安装SASS加载器cnpm install sass-loader node-sass --save-dev
- 启动测试npm run dev

在这里插入图片描述

注意sass-loader的版本
项目github地址
整体效果

在这里插入图片描述

4.12. 路由嵌套

import Vue from 'vue'
import VueRouter from "vue-router"

import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/main',
      component: Main,
      children: [ // 嵌套路由
        {path: '/user/profile', component: UserProfile},
        {path: '/user/list', component: UserList},
        {path: '/user/telephone', component: Telephone}
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

在这里插入图片描述

项目github地址

4.13. 参数传递及重定向

方式1

// 传递 
<!--name-传组件名 params传递参数，需要对象： v-bind-->
 <router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>


// 接收
import Vue from 'vue'
import VueRouter from "vue-router"

import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/main',
      component: Main,
      children: [ // 嵌套路由
        {path: '/user/profile:id', name: 'UserProfile', component: UserProfile},
        {path: '/user/list', component: UserList},
        {path: '/user/telephone', component: Telephone}
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

// 展示
<template>
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}
  </div>
</template>

<script>
export default {
  name: "UserProfile"
}
</script>

<style scoped>

</style>

方式2

// 设置props
import Vue from 'vue'
import VueRouter from "vue-router"

import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/main',
      component: Main,
      children: [ // 嵌套路由
        {path: '/user/profile:id', name: 'UserProfile', component: UserProfile, props: true},
        {path: '/user/list', component: UserList},
        {path: '/user/telephone', component: Telephone}
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

// 绑定id
<template>
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}<br/>
    {{id}}
  </div>
</template>

<script>
export default {
  props: ['id'],
  name: "UserProfile"
}
</script>

<style scoped>

</style>

重定向

import Vue from 'vue'
import VueRouter from "vue-router"

import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/main',
      component: Main,
      children: [ // 嵌套路由
        {path: '/user/profile:id', name: 'UserProfile', component: UserProfile, props: true},
        {path: '/user/list', component: UserList},
        {path: '/user/telephone', component: Telephone}
      ]
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/goHome',
      redirect: '/main'
    }
  ]
})

4.14. 路由模式和404

export default new VueRouter({
  mode: 'history', // 不带#
})

路由钩子

<template>
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}<br/>
    {{id}}
  </div>
</template>

<script>
export default {
  props: ['id'],
  name: "UserProfile",
  beforeRouteEnter: (to, from, next)=>{
    console.log("进入钩子之前");
    next(vm => {
      vm.getData();  // 进入路由之前，执行我们自定义的getData方法
    });
  },
  beforeRouteLeave: (to, from, next)=>{
    console.log("离开钩子之前")
    next();
  },
     //   to：路由将要跳转的路径信息
// from：路径跳转前的路径信息
// next：路由的控制参数
// next() 跳入下一个页面
// next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
// next(false) 返回原来的页面
// next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例 
  methods: {
    getData: functsion () {
      this.axios({
        method: 'get',
        url: 'http://localhost:3939/static/data.json'
         //  url: '/../static/data.json'
      }).then(function (response) {
        console.log(response)
      })
    }
  }
}
</script>

<style scoped>

</style>

安装axios cnpm install axios -s
安装vue-axios npm install --save vue-axios

转载于他人

------------恢复内容结束------------

相关阅读:
linux下mysql数据的导出和导入
 mysql 命令行导数据库
 前端开发中经常使用到的20个正则表达式
 HTML5学习内容总结
 HTML5表单type类型详解
 表单说明（部分）
HTML5和HTML4的区别（常用部分）
HTML基础知识
 认识表单元素
 学习html5第一天
原文地址：https://www.cnblogs.com/lvshuizhicheng/p/14400991.html