Vue基础知识以及快速入门&&Element基本使用

Vue

  • Vue是一套构建用户界面的渐进式前端框架
  • 只关注视图层,并且非常容易学习,还可以很方便的与其他库或已有项目整合。
  • 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。

特点:易用、灵活、性能佳

快速入门

Vue核心对象:每一个Vue程序都是从Vue核心对象开始的

let vm=new Vue({

​ 选项列表;

})

1.导包

下载和引入vue.js文件

2.编写入门程序。

​ 视图:负责页面渲染主要由HTML+CSS构成

​ 脚本:负责业务数据模型(model)以及数据的处理逻辑

Vue参数

  • el: 用于接收获取到页面中的元素。(根据常用选择器获取)
  • data选项:用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。
  • methods选项:用于定义方法。方法可以直接通过对象名调用,this代表当前Vue对象

指令介绍

指令:是带有v-前缀的特殊属性,不同指令具有不同含义。例如v-html,v-if

使用指令时,通常编写在标签的属性上,值可以使用JS的表达式

指令 作用
v-html 把文本解析为HTML代码
v-bind 为HTML标签绑定属性值
v-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show 根据条件展示某元素,区别在于切换的时display属性的值
v-for 列表渲染,遍历容器的元素或者对象的属性
v-on 为HTML标签绑定事件
v-model 在表单元素上创建双向数据绑定

文本插值

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

<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:"hello Vue"
        }
    });
script>

绑定属性

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

条件渲染

<body>
    <div id="div">
        <div v-if="num%3==0">div1div>
        <div v-else-if="num%3==1">div2div>
        <div v-else="num%3==2">div3div>
        <div v-show="flag">div4div>
    div>
body>
<script src="js/vue.js">script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:true
        }
    })
script>

列表渲染

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

<li v-for="name in names">
                {{name}}
li>

v- for 在哪个标签下,循环的就是哪个标签。循环获取的值是names

事件绑定

<body>
    
    <div id="div">
        <div>{{name}}div>
        
        <button v-on:click="change()">改变div的内容button>
        <button v-on:dblclick="change()">改变div的内容button>
        <button @click="change()">简写改变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数据也会更新,是指内存中更新,不是直接修改了代码

<body>
    
    <div id="div">
        <form autocomplete="off">
            姓名:<input type="text" name="username" v-model="username">
            年龄:<input type="number" name="age" v-model="age">
        form>
         <button @click="getUsername()">testbutton>
    div>
   
body>
<script src="js/vue.js">script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:24
        },
        methods:{
            getUsername(){
                console.log(this.username+this.age)
            }
        }
    });
script>

Element 基本使用

element:网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库

使用Element前提必须要有Vue

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

Element快速入门

1.下载Element核心库

2.引入Element样式文件

3.引入Vue核心js文件

4.引入Element核心js文件

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

5.编写按钮标签

6.通过Vue核心对象加载元素

在element官网中挑选我们想使用的组件

Vue基础知识以及快速入门&&Element基本使用_第1张图片

点击显示代码

Vue基础知识以及快速入门&&Element基本使用_第2张图片

直接复制粘贴想用的使用即可

  <div id="div">
        <el-button type="success" plain disabled>成功按钮el-button>
    div>
body>
<script>
    new Vue({
        el:"#div"
    })
script>

你可能感兴趣的:(Vue基础知识以及快速入门&&Element基本使用)