VUE

VUE:面向数据编程

JQuery:面向DOM

Jquery他操作数据时伴随着需要操作dom
Vue主要面向数据操作（JSP）

VUE特点

整体构成 = 模板 + 数据

模板

<body>
    <!-- 视图 -->
    <div id="div">
        {
     
     {msg}}
    </div>
</body>

数据来源

    // 脚本
    new Vue({
      
      
        el:"#div",
        data:{
      
      
            msg:"Hello Vue"
        }
    });

Vue 是一套构建用户界面的渐进式前端框架。

只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。

通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。

特点

易用：在有 HTML CSS JavaScript 的基础上，快速上手。

灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

Vue 快速入门

下载和引入 vue.js 文件。
编写入门程序。

视图：负责页面渲染，主要由 HTML+CSS 构成。

脚本：负责业务数据模型（Model）以及数据的处理逻辑。

    <title>快速入门</title>
</head>
<body>
    <!-- 模板 -->
    <!-- 视图 -->
    <div id="div">
        {
   
   {msg}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    new Vue({
        el:"#div",
        data:{
            msg:"Hello Vue"
        }
    });
</script>

el 选项：指定模板位置,用于接收获取到页面中的元素。(根据常用选择器获取)。

data 选项：指定模板中使用的数据.用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。

methods 选项：用于定义方法。在方法中能够使用this操作.方法可以直接通过对象名调用，this 代表当前 Vue 对象。

method普通形式

        methods:{
    
    
            study:function(){
    
    
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }

 <title>快速入门升级</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        <div>姓名：{
    
    {
    
    name}}</div>
        <div>班级：{
    
    {
    
    classRoom}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    let vm = new Vue({
    
    
        el:"#div",
        data:{
    
    
            name:"张三",
            classRoom:"一班"
        },
        methods:{
    
    
            study(){
    
    
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }
    });

    //定义打招呼方法
    function hi(){
    
    
        vm.study();
    }

    //定义修改班级
    function update(){
    
    
        vm.classRoom = "二班";
    }
</script>

指令：

编写模板文件使用

是带有 v- 前缀的特殊属性，不同指令具有不同含义。

例如 v-html，v-if，v-for

使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
$C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1593396480984.png$ )]

文本插值

v-html：把文本解析为 HTML 代码。

把变量内容放在标签的文本处

  <title>文本插值</title>
</head>
<body>
    <div id="div">
        <div>{
    
    {
    
    msg}}</div>
        <div v-html="msg"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            msg:"<b>Hello Vue</b>"
        }
    });
</script>

绑定属性

v-bind：为 HTML 标签绑定属性值。

操作标签的属性值

    <style>
        .my{
    
    
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <a v-bind:href="url">百度一下</a>
        <br>
        <a :href="url">百度一下</a>
        <br>
        <div :class="cls">我是div</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</script>

条件渲染

v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。

v-else：条件性的渲染。

v-else-if：条件性的渲染。

v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。

  <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else="num % 3 == 2">div3</div>

        <div v-show="flag">div4</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            num:1,
            flag:false
        }
    });
</script>

列表渲染

v-for：列表渲染，遍历容器的元素或者对象的属性。

<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {
    
    {
    
    name}}
            </li>
            <li v-for="value in student">
                {
    
    {
    
    value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            names:["张三","李四","王五"],
            student:{
    
    
                name:"张三",
                age:23
            }
        }
    });
</script>

事件绑定

v-on：为 HTML 标签绑定事件。

 <title>事件绑定</title>
</head>
<body>
    <div id="div">
        <div>{
    
    {
    
    name}}</div>
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>

        <button @click="change()">改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            name:"黑马程序员"
        },
        methods:{
    
    
            change(){
    
    
                this.name = "传智播客"
            }
        }
    });
</script>

表单绑定

将变量和输入框进行双向绑定,改变一方另一方也将改变

v-model：在表单元素上创建双向数据绑定。

双向数据绑定

更新 data 数据，页面中的数据也会更新。

更新页面数据，data 数据也会更新。

 <title>表单绑定</title>
</head>
<body>
    <div id="div">
        <form autocomplete="off">
            姓名：<input type="text" name="username" v-model="username">
            <br>
            年龄：<input type="number" name="age" v-model="age">
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            username:"张三",
            age:23
        }
    });
</script>

Element 介绍

Element：网站快速成型工具。

是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。

使用 Element 前提必须要有 Vue。

组件：组成网页的部件，例如超链接、按钮、图片、表格等等~

Element 官网：https://element.eleme.cn/#/zh-CN

Element-UI基本使用

css文件导入
先导入Vue的js文件
导入自己的js

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <button>我是按钮</button>
    <br>
    <div id="div">
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
          </el-row>
    </div>
</body>
<script>
    new Vue({
    
    
        el:"#div"
    });
</script>

Vue快速入门与Element-UI的基本使用

VUE