Vue2框架

VUE

快速入门

基于vue.js框架来编写项目需要以下几个步骤：

  • 引入 Vue.js文件
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化文件大小和响应速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<!-- 当然，也可以将文件下载下来再通过本地导入-->
  • 创建Vue核心对象，进行数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 1.引入vue.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

<!-- 2.指定区域，该区域的内容希望由vue.js来接管。 -->
<div id="app">
    <h1>欢迎学习Vue.js</h1>
    <div>我叫{{name}}，微信{{wechat}}</div>    
    <input type="button" value="点我" v-on:click="clickMe">
</div>

<script>
    // 3.创建Vue对象，并关联指定HTML区域。
    var app = new Vue({
        el: '#app',
        data: {
            name: 'admin',
            wechat: 'admin666'
        },
        methods: {
            clickMe: function () {
                // 获取值this.name
                // 修改值this.name = "xx"
                this.name = "root";
                this.wechat = "root666";
            }
        }
    })
</script>
</body>
</html>

Vue 指令

插值表达式

一般在显示文本内容的标签中使用。

<div id="app">
    <div>我叫{{name}}，邮箱:{{dataInfo.email}}</div>

    <ul>
        <li>{{'root'}}</li>
        <li>{{'root' + "123"}}</li>
        <li>{{ 1===1 ?"admin":"root"}}</li>
    </ul>
  
    <span v-html="rawHtml"></span>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: 'admin',
            dataInfo: {
                id: 1,
                email: "xxx.com"
            },
            rawHtml:"<a href="#">百度一下</a>"
        }
    })

// {{ }}和v-text的作用是一样的都是插入值直接渲染  innerText
// v-htmL既能插入值又能插入标签  innerHTML

</script>

v-bind指令

一般用于对标签中的属性进行操作。

<a v-bind:href="url">百度一下</a>

<a :href="url">百度一下</a>

<script>
    new Vue({
        el:"#app",
        data:{       
            url:"https://www.baidu.com"
        }
    });
</script>

v-model指令

般用于在交互的表中中使用，例如：input、select、textarea等。【双向绑定】

<div id="app">
    <a v-bind:href="url">点击一下</a>
    <a :href="url">点击一下</a>
    <input v-model="url">
</div>

<script>
    new Vue({
        el:"#app",
        data:{       
            username:"",
            url:"https://www.baidu.com"
        }
    });
</script>

v-on指令

<input type="button" value="一个按钮" v-on:click="show()">

<input type="button" value="一个按钮" @click="show()">

<script>
    new Vue({
        el: "#app",
        methods: {
            show(){
                alert("我被点了");
            }
        }
    });
</script>

v-for指令

<div id="app">
    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>

    <hr>
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}} <br>
    </div>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            addrs:["北京","上海","西安"]
        }
    });
</script>

v-if指令

条件判断。

<div id="app">
    <div v-if="count == 3">div1</div>
    <div v-else-if="count == 4">div2</div>
    <div v-else>div3</div>
    <hr>
    <input v-model="count">
</div>

<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data:{
            count:3
        }
    });
</script>

v-show指令

根据条件显示或隐藏（标签都会渲染到页面）。

<div id="app">
    <h1 v-show="v1">可可西里</h1>
    <h1 v-show="!v1">罗布泊</h1>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            v1: false,
        }
    })
</script>                     

 `v-show` 不展示的原理是给对应的标签添加 `display` css属性，并将该属性值设置为 `none` ，这样就达到了隐藏的效果。而 `v-if` 指令是条件不满足时根本就不会渲染。

生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数
image-20210831160335496

ElementUI

快速入门

  • 将资源element-ui 文件夹直接拷贝到项目的 webapp 下。目录结构如下
  • 创建页面，并在页面引入Element 的css、js文件 和 Vue.js
<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  • Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象
new Vue({
   el:"#app"
})

Element 布局

Element 提供了两种布局方式，分别是：

* Layout 布局
* Container 布局容器
  • Layout 局部

通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。
image-20210831183433892

  • Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构
image-20210831183433892

脚手架

脚手架（vue cli - Vue Command Line Interface ）是一个基于 Vue.js 进行快速开发的完整系统

posted @ 2022-12-04 09:36  晚点心动。  阅读(62)  评论(0)    收藏  举报