谷粒学院-8-vue环境

一、介绍

1、Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代 化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方网站：https://cn.vuejs.or

2、初始Vue.js

<div id="app">
    {{message}}
</div>
<script>
    new Vue({
        el: "#app", //绑定vue作用的范围
        data: {
            message: "hello vue!"
        }
    })
</script>

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系 统 这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作

二、基本语法

1、单向绑定

单向绑定指的是：我只能去读取这个数据，但如果这个数据在我这里发生了修改，是不会输出的

你看到的 v-bind 特性被称为指令。指令带有前缀 v除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

<div id="app">
    <!--v-bind单向绑定指令,主要用于绑定对应标签的属性-->
    <img v-bind:src="href">
</div>
<script>
    new Vue({
        el: "#app", //绑定vue作用的范围
        data: {
            content: '我是标题',
            message: "页面加载于.." + new Date().toLocaleDateString(),
            href: "https://exploit-typora.oss-cn-shenzhen.aliyuncs.com/springbootTest/header.png"
        }
    })
</script>

2、双向绑定

<div>
    <!--在这个地方输入图片url，下面的图就会变-->
    <input type="text" v-model="href">
    <!--v-bind单向绑定指令,主要用于绑定对应标签的属性-->
    <img style="width: 200px;" v-bind:src="href">
</div>
<script>
    new Vue({
        el: "#app", //绑定vue作用的范围
        data: {
            content: '我是标题',
            message: "页面加载于.." + new Date().toLocaleDateString(),
            href: "https://exploit-typora.oss-cn-shenzhen.aliyuncs.com/springbootTest/header.png"
        },
        methods:{
            next(){
                console.log("下一副图")
            },
            previous(){
                console.log("上一副图")
            }
        }
    })
</script>

3、事件

<div>
    <!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
    <button v-on:click="search()">查询</button>
    <p>您要查询的是：{{searchMap.keyWord}}</p>
    <p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
</div>
<script>
    data: {
 		searchMap:{
 		keyWord: '尚硅谷'
 	},
 	//查询结果
	result: {}
},
methods:{
 	search(){
 	console.log('search')
 	//TODO
 }
}
</script>

4、修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。 例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()： 即阻止事件原本的默认行为

<div id="app">
    <form v-on:submit.prevent="submit()">
        <label for="username">
            输入你的名字：<input id="username" type="text" v-model="user.username">
        </label>
        <label>
            <input type="submit" value="提交">
        </label>
    </form>
</div>
<script>
    new Vue({
        el: "#app", //绑定vue作用的范围
        data: {
            user:{
                username: "wang"
            }
        },
        methods:{
            submit() {
                console.log(this.user.username)
            }
        }
    })
</script>

5、条件渲染

<div id="app">
    <!--切换success的boolean值，选中为true，不选中为false-->
    <input type="checkbox" v-model="success">
    <!--根据success的boolean值判断出现哪一个-->
    <h1 v-if="success">喜欢哦</h1>
    <h1 v-else>ok</h1>
    <h1>-------------------------------</h1>
    <!--v-show比v-if好用-->
    <h1 v-show="success">hello</h1>
    <h1 v-show="!success">你好啊</h1>
</div>
<script>
    new Vue({
        el: "#app", //绑定vue作用的范围
        data: {
            success:false
        }
    })
</script>

6、列表渲染

属性列表循环

<div id="app">
<table border="1">
    <tr v-for="(item, index) in userList">
        <td>这个user在循环中的位置，index可以不存在：{{index}}</td>
        <td>user对象的id：{{item.id}}</td>
        <td>user对象的name：{{item.username}}</td>
        <td>user对象的age：{{item.age}}</td>
    </tr>
</table>
</div>
<script>
    new Vue({
        el: "#app", //绑定vue作用的范围
        data: {
            userList:[
                {id: 1,username: "tom",age:18},
                {id: 2,username: "iii",age:20},
                {id: 3,username: "ooo",age:22}
            ]
        }
    })
</script>

三、组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为 一个组件树

1、局部组件

<div id="app">
    <hello></hello>
</div>
<script>
    new Vue({
        el: "#app", //绑定vue作用的范围
        data: {
            message: "hello vue!"
        },
        components: {
            //组件的名字
            "hello":{
                template: '<div>\n' +
                    '    <ul>\n' +
                    '        <li>首页</li>\n' +
                    '        <li>hello</li>\n' +
                    '        <li>你好呀</li>\n' +
                    '    </ul>\n' +
                    '</div>'
            }
        }
    })
</script>

2、全局组件

创建全局组件：是一个单独的js文件

不需要引入vue的js文件

Vue.component(
  "hello" , {
        template: '<div>\n' +
            '    <ul>\n' +
            '        <li>首页</li>\n' +
            '        <li>hello</li>\n' +
            '        <li>你好呀</li>\n' +
            '    </ul>\n' +
            '</div>'
    }
);

使用组件

<!doctype html>
<html lang="en">
<head>
    
    
    
    <title>global</title>
    <script src="vue/vue.min.js"></script>
    <script src="component/component.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <hello></hello>
</div>
<script>
    new Vue({
        el: "#app", //绑定vue作用的范围
        data: {
            message: "hello vue!"
        }
    })
</script>
</body>
</html>

四、vue生命周期

指的就是在script标签中的new Vue对象的生命周期，创建、渲染、更新、到销毁的过程

<div id="app">
    {{message}}
    <hello></hello>
</div>
<script>
    new Vue({
        el: "#app", //绑定vue作用的范围
        data: {
            message: "hello vue!"
        },
        //===创建时的四个事件
        beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行
            console.log(this.message) //undefined
            this.show() //TypeError: this.show is not a function
            // beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化
        },
        created() { // 第二个被执行的钩子方法
            console.log(this.message) //床前明月光
            this.show() //执行show方法
            // created执行时，data 和 methods 都已经被初始化好了！
            // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
        },
        beforeMount() { // 第三个被执行的钩子方法
            console.log(document.getElementById('h3').innerText) //{{ message }}
            // beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
        },
        mounted() { // 第四个被执行的钩子方法
            console.log(document.getElementById('h3').innerText) //床前明月光
            // 内存中的模板已经渲染到页面，用户已经可以看见内容
        },
//===运行中的两个事件
        beforeUpdate() { // 数据更新的前一刻
            console.log('界面显示的内容：' + document.getElementById('h3').innerText)
            console.log('data 中的 message 数据是：' + this.message)
            // beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
        },
        updated() {
            console.log('界面显示的内容：' + document.getElementById('h3').innerText)
            console.log('data 中的 message 数据是：' + this.message)
            // updated执行时，内存中的数据已更新，并且页面已经被渲染
        }
    })
</script>

五、路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

引入js

<script src="vue/vue.min.js"></script>
<!--注意router必须要在vue包之后导入，否则失败-->
<script src="vue/vue-router.min.js"></script>

html文件

<div id="app">
    <h1>Hell Router!</h1>
    <p>
        <router-link to="/">首页</router-link>
        <router-link to="/student">会员管理</router-link>
        <router-link to="/teacher">讲师管理</router-link>
    </p>
    <!--路由出口-->
    <router-view></router-view>
</div>
<script>
    /*
    * 1、定义组件
    * 可以从其他文件import进来
    * */
    const Welcome = { template: '<div>欢迎</div>' };
    const Student = { template: '<div>student list</div>' };
    const Teacher = { template: '<div>teacher list</div>' };

    /*
    * 2、定义路由
    * 每个路由映射一个组件
    * */
    const routes = [
        {path:"/",redirect:"/welcome"},
        {path:"/welcome",component: Welcome},
        {path:"/student",component: Student},
        {path:"/teacher",component: Teacher},
    ];

    /*
    * 3、创建router实例
    * 然后传`routers`配置
    * */
    const router = new VueRouter({
        routes:routes
    });

    /*
    * 4、创建和挂载实例
    * 从而让整个应用都有路由功能
    * */
    const app = new Vue({
        el:'#app',
        router:router
    });
</script>

六、axios使用

axios.get(url).then(请求成功函数).catch(失败处理函数)

<div id="app">
    <h1>{{teacher.name}}</h1>
    <h1>{{teacher.career}}</h1>
    <h1>{{teacher.intro}}</h1>
    <img :src="teacher.avatar" alt="" >
</div>
<script>
    new Vue({
        el: "#app", //绑定vue作用的范围
        data: {
            teacher : null
        },
        created() {
            this.getList(1)
        },
        methods:{
            getList(id){
                axios.get("http://localhost:8001/eduservice/edu-teacher/"+id)
                .then(response => {
                    console.log(response);
                    this.teacher = response.data.data.teacher;
                })
                .catch(error => {
                    console.log(error);
                })
            }
        }

    })
</script>

这里还需要post请求，put请求，delete请求，之后再了解

七、element-ui使用

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建

官网： http://element-cn.eleme.io/#/zh-CN

将element-ui引入到项目中

1、引入js和css

<!-- import CSS -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="vue.min.js"></script>
<!-- import JavaScript -->
<script src="element-ui/lib/index.js"></script>

2、编写html

<div id="app">
     <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
         <p>Try Element</p>
     </el-dialog>
</div>

关于.sync的扩展阅读 https://www.jianshu.com/p/d42c508ea9de

3、编写js

<script>
     new Vue({
         el: '#app',
         data: function () {//定义Vue中data的另一种方式
         	return { visible: false }
         }
     })
</script>