您的位置：首页 > Web前端 > Vue.js

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

2020-06-29 20:03 429 查看

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:"<b>hello Vue</b>"}});</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">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: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()">test</button></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官网中挑选我们想使用的组件

点击显示代码

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

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

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航