精华内容
下载资源
问答
  • 一、uni-app (app混合开发)uni-app是一个使用Vue.js开发跨平台个人文库应用前端框架,开发者编写一套代码,可编译到iOS,安卓,H5,小程序等多个 平台。二、vue-cli3+cordova (app混合开发)三、element-ui (后台...

    一、uni-app (app混合开发)

    uni-app是一个使用Vue.js开发跨平台个人文库应用的前端框架,开发者编写一套代码,可编译到的iOS,安卓,H5,小程序等多个   平台。

    二、vue-cli3+cordova (app混合开发)

    三、element-ui (后台管理系统)

    四、vant-ui、mint-ui(移动端插件)

    网站:mint-ui  好像很久没更新了,不过还是可以用

    vant-ui  我自己用着还可以

    五、weex(vue框架中最接近原生app开发)

    在RN的大热下,基本上没人用,所以导致文档不全,社区不大。而且由于flutter的降临,处境堪忧。但它是国产,我在心里支持它。

    六、v-charts (基于 Vue2.0 和 ECharts 封装的图表组件)

    个人感觉很好用

    七、vue-awesome-swiper(vue轮播组件)

    八、 Lodash.js

    一套工具库,内部封装了很多字符串、数组、对象等常见数据类型的处理函数,包括函数防抖和函数节流。

    九、Moment.js (js日期处理类库)

    十、vue-amap(地图组件)

    只支持高德接口

    如果项目较大,功能要求地图版本较新,建议使用原生地图!教程如下:

    十一、nuxt.js( vue服务端渲染应用框架)

    十二、vue-antd(后台ui框架)

    阿里爸爸开发的ui框架,其中包括了react、vue、angular等主流前端框架,个人感觉功能比element-ui强大

    十三、VUE-中英切换(vue-i18n)

    十四、vue-大屏数据展示组件库

    主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用

    十五、vue-quill-editor(富文本编辑器)

    对比过很多编辑器,这个编辑器是最推荐使用的

    展开全文
  • 几款前端常用的UI框架总结

    千次阅读 2018-11-07 19:49:16
    UI框架总结 1、layUi是2016年国人开发的一款框架,门槛低,拿来即用,更多是为服务端程序员量身定做。 适合 PC 端后台系统与前台界面速成开发方案,是对后端开发人员更加友好,不太利于前端交互。轻量级。目前...

    UI框架总结

    1、layUi是2016年国人开发的一款框架,门槛低,拿来即用,更多是为服务端程序员量身定做。 适合 PC 端后台系统与前台界面的速成开发方案,是对后端开发人员更加友好,不太利于前端的交互。轻量级。目前更新到了2.0的版本

    2、Bootstrap做网站,类似官网,它能够做到响应式布局同时满足pc端和移动端。更加成熟

    3、mint-ui 配合vue使用的使用的移动端组件库,安装依赖npm install mint-ui -S

    4、Element是配合vue前端框架使用的pc端的Ui框架

    5、Ant Design是蚂蚁金服开发的一款Ui框架,pc和移动端都有,配合React前端框架使用。

    展开全文
  • aVue与Vue

    2020-10-15 13:31:22
    ui库进行二次封装,简化一些繁琐操作,核心理念为数据驱动视图,主要组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让...

    Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易。

    Avue是一个后台快速集成解决方案(curd和form快速开发组件),它基于 Vue全家桶 和 element-ui,使用了最新的前端技术栈,支持权限验证,第三方网站嵌套等功能。

    展开全文
  • List item 内容 基本介绍 vue是什么 目标:了解vue的一些基础概念。 ...vue是:渐进式javascript框架。...UI框架 - bootstrap。包含 js html css 主要实现了一套支撑网站开发...JS框架 - 纯js编写,提供了开发网站功能.

    基本介绍

    vue是什么

    目标:了解vue的一些基础概念。

    官方网站: https://cn.vuejs.org/

    vue是:渐进式javascript框架。

    两组概念

    (1)框架

    • 库。只提供一些API给开发者使用。jquery 是一个js库
    • 框架。拥有自己的规则和元素,它比库要更加强大一些。
      • UI框架 - bootstrap。包含 js html css 主要实现了一套支撑网站开发的常用控件(对话框,弹出框,tab页签…)
      • JS框架 - 纯js编写,提供了开发网站功能的标准(规则),约定开发规则,通过这些规则组织你的功能代码,。

    (2)渐进式

    在这里插入图片描述

    • 它可以很简单,帮助,确保最快上手,最快使用
    • 它也可以很复杂,配合不同的工具,在各种复杂的应用场合下工作。

    上得厅堂,下得厨房

    文可提笔安天下,武可上马定江山

    能做什么

    1. 充当模板引擎,渲染数据,制作网页

    在这里插入图片描述

    网页上的四个要素

    • 结构 — html
    • 样式 — css
    • 行为 — js
    • 数据 — 后端接口返回的json数据
    1. 通过脚手架工具,开发单页应用。直接用它来开发网站!
    2. 在其它框架下开发微信小程序或者跨端,跨平台应用

    小结:啥都能做!

    安装vue

    在不同的学习阶段有不同的使用方式:

    • 基础阶段:直接当做一个普通的js库来引入使用(与jquery类似)

      • 本地方式
        • 先下载:https://cn.vuejs.org/js/vue.js
        • 然后在你的.html文件中引入:<script src="./vue.js"></script>
      • 直接引入公网中的js
        • 引入:
      • <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    • 项目阶段:以npm包的方式来引入

      • 安装 npm i vue
      • 导入后使用即可

    总结:在基础学习阶段,使用本地下载引入的方式或者公网中的js均可。

    体验vue

    第一个vue程序。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <!-- 2. 视图 -->
      <div id="app">
        <h3>{{msg}}</h3>
        <input v-model="msg" type="text">
      </div>
      <!-- 引入VUE核心js文件 -->
      <script src="./vue.js"></script>
      <!-- 功能代码 -->
      <script>
        // 需要把数据渲染到页面上
        // 页面上输入的内容,收集到数据中
    
        // 2. 控制数据模型和视图管理者
        const vm = new Vue({
          el: '#app',
          // 1. 数据模型
          data: {
            msg: 'hi vue'
          }
        })
      </script>
    </body>
    </html>
    

    安装live-server插件

    在我们写一些页面功能时,如果希望实时观察到效果,可以安装这个插件。(与学习vue无关)

    功能说明

    它是一个vscode的插件,它会监听代码的改动,一旦我们修改了代码,它会立即刷新网页。

    安装过程

    在这里插入图片描述

    使用步骤

    • 使用vscode打开某个文件夹 (不是打开单个文件!)
    • 打开某个.html文件上,右键,在弹出的菜单上选择open with live server

    在这里插入图片描述
    此时,它会自动调起浏览器,并打开我们当前选择的.html文件。

    补充

    另一种打开方式

    在当前的.html打开时,在vscode的状态栏上找到liver-server 的图标,点击一次。
    在这里插入图片描述

    更友好的工作模式

    在你的电脑屏幕上同时打开vscode和浏览器,一边写代码一看效果。

    在这里插入图片描述

    vue的特点

    声明式渲染

    允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

    <div id="app">
      {{ message }}
    </div>
    

    数据驱动视图

    在vue中,通过修改数据即可更新视图(页面),大大解放了操作dom的时间,把精力放在业务上。 所以,我们在写vue代码时,会更加关心数据的构成。

    双向数据绑定

    vue是一个典型的 MVVM 思想的框架

    • M 是数据模型 model
    • V 是视图(界面)view
    • VM 是控制数据模型和视图的管理者

    把上面的代码,可以拆分成,M + V + VM 结构。

    在这里插入图片描述

    数据可以影响视图变化,视图变化也会影响数据变化。

    组件化开发

    在这里插入图片描述

    把一个网站功能,分割若干个组件,相同类型的组件可复用,组件功能是独立的,可维护性高。

    vue实例和它的三大件

    • el

    • data

    • methods

    vue实例

    const vm = new Vue({
        el: ,
        data: ,
        methods: ,
    })
    

    理解:

    • Vue(V是大写的)是一个构造器,用它来创建vue实例。
    • vm就是创建出来的实例对象,
    • 这个构造器只有一个参数,这个参数是一个对象,其中的属性名和属性值都有特定的含义。

    el选项

    el选项,用来指定vue实例管理的容器。

    <body>
      {{msg}}
      <div id="app">
        {{msg}}
        <!-- 被管理的容器才可以使用vue提供的功能 -->
      </div>
      <script src="./vue.js"></script>
      <script>
        // 初始化vue实例,vue实例就是vm的意思
        const vm = new Vue({
          // 初始化的配置对象,里面有很多选项
          // el === element 元素,标签,容器
          // el指定当前vue实例管理的容器是谁。
          // 值是:选择器 | dom元素
          // el: '#app',
          // el: document.querySelector('#app'),
          // Do not mount Vue to <html> or <body> - mount to normal elements instead.
          // el不能指定 html 和 body 容器
          el: 'body',
          data: {
            msg: 'hi vue'
          }
        })
      </script>
    </body>
    </html>
    

    要点:

    • 可以是选择器,也可以是某个dom元素
    • 只能是普通的dom(div,p),不能是 html,body 容器
    • 不在此容器内的部分,不会受到vue实例影响

    data选项

    作用:它是一个对象,它用来规定数据。

    <div id="app">
            <h3>理解data</h3>
    
            <p>姓名:{{name}}</p>
            <p>爱好1:{{aihao[0]}}</p>
            <p>爱好2:{{aihao[1]}}</p>
            <ul>
                <li>QQ:{{lianxi.QQ}}</li>
                <li>email:{{lianxi.email}}</li>
                <li>weixin:{{lianxi.weixin}}</li>
            </ul>
        </div>
    
    
        <script>
            // data: 它是一个对象,用来规定数据。
    
            // 现在是把vue当作一个模板引擎来使用。
            // 它的作用是把数据显示在页面上。data就是用来
            // 约定数据的。
            // 在后面的学习的,这个部分的数据会是
            // 从ajax接口中获取到的
    
    
            // 访问数据:
            // 方法一:在视图中,通过{{}}插值表达式 直接访问。
            /// 不要写data.XXX - 不要写data - 不要写data
    
            // 方法二:通过Vue实例vm来访问
            //  vm.XXX
    
            const vm = new Vue({
                el: "#app",
                // el: document.getElementById("app"),
                data: {
                    name: '凡哥-凡叔',
                    aihao:['听音乐','读书'],
                    lianxi: {
                        QQ:"123456",
                        email:'xxxxxx',
                        weixin:'yyyyyy'
                    }
                }
            })
            console.log(vm)
            console.log(vm.name)
            console.log(vm.aihao[1])
            console.log(vm.lianxi.QQ)
        </script>
    

    访问方式:

    1. 通过实例可以直接访问data中的数据 vm.msg
    2. 在模板中使用数据的字段名称即可。{{msg}}

    注意:

    • 在data中显性声明的数据,都是响应式数据,可以数据驱动视图。
    • 在模板中使用的数据,建议在data中提前声明,即使没有值也需要声明。

    methods选项

    目标:知道vue选项中methods选项的使用方法和注意事项。

    作用:为vue实例提供自定义函数的(大白话:自己的业务函数书写位置)

    调用方法:

    1. vue实例直接调用,且函数的this指向就是vue实例,就是vm
    2. 在vue实例管理的模板(管理的容器|视图)中使用这些函数
    // Vue构造器中的参数是一个对象,它有很多的属性
            // el,
            // data
            // methods
            // ... 还有好多好多....
    
            // methods 是一个对象
            // 在对象中,正常定义函数
    
            // (1) 定义函数
            // (2) 调用函数
            //   1. 通过vm实例来调用
            //   2. 也可以在页面上,通过{{函数名}}来调用 --不推荐--
            //   3. 当做事件的回调函数来使用。
    
            
    
            const vm = new Vue({
                el: "#app",
                data: {
                    name: '凡哥-凡叔'
                },
                methods: {
                    // 定义函数
                    // 函数用来做你自己业务逻辑
    
                    // 方法1:
                    "changeName1": function() {
                        console.log('changeName1')
                        this.name = "小凡1"
                    },
                    // 方法2:推荐
                    // es6中支持对对象中的方法的简写
                    changeName2 () {
                        console.log('changeName2')
                        console.log(this == vm)
                        this.name = "小凡2"
                    },
                    // 方法3:箭头函数。
                    // 其中的this是有问题!!
                    // 这里的this指向的是window,而不是vm实例
                    // 所以,不能使用this来操作数据。
                    changeName3: () => {
                        console.log('changeName3')
                        console.log(this)
                        this.name = "小凡3"
                    }
                }
            })
    
            // console.log(vm)
            // vm.changeName2()
            // vm.changeName1()
    

    注意:

    书写函数有很多方式

    • 普通的写法
    • es6简写格式 (推荐使用)
    • 有箭头函数 (不使用。因为其中的this不指向vue实例)

    在函数的内部(不是箭头函数的情况)

    • this会指向vue实例。

    插值表达式

    目标:了解vue术语插值表达式是什么和使用场景。

    在vue中{{ }}语法,叫做:插值表达式,大白话就是输出值的语法。

    在插值表达式中可以写

    • 写data数据字段名称
    • 写methods函数的名称,进行调用
    • 对data数据字段进行表达式运算
      • 加减运算
      • 三元运算

    不能写

    • js语句:声明变量,分支,循环
    • 访问在vue实例之外,自定义的全局变量
    <div id="app">
            <h3>理解插值表达式</h3>
    
            <p>姓名:{{name}}</p>
            <!-- 字符串的拼接 -->
            <p>{{name +',你好'}}</p>
            <!-- 算术运算 -->
            <p>{{num/5}}</p>
    
            <p>{{num > 90 ? 'A+':'不是A+'}}</p>
    
            <p>method:{{test1()}}</p>
            <!-- 不能声明变量 -->
            <!-- {{var a = 1}} -->
            
            <!-- 不能写分支 -->
            <!-- {{ if(true) {} }} -->
            <!-- 不能访问除了vm实例中声明的数据 -->
            <!-- {{num123}} -->
        </div>
    
    
        <script>
            // 插值表达式: {{}}
            // 作用:输出值(把数据渲染到页面)
    
            // {{}} 中可以写什么
            // 1. data数据字段名
            // 2. methods函数名称,进行调用
            // 3. data数据字段进行表达式运算
            //   算术
            //   字符串拼接
            //   三元
    
            // {{}} 不可以写什么
            // 1. 不能写js语句:声明变量,分支,循环.....
            // 2. 不能访问除了vm实例中声明的数据
    
            // [Vue warn]: Property or method "num123" is not 
            // defined on the instance(实例) but referenced(引用) 
            // during render
            var num123 = 100
    
            const vm = new Vue({
                el: "#app",
                data: {
                    name: 'vue',
                    num: 80
                },
                methods: {
                    test1 () {
                        console.log('test1')
                    }
                }
                
            })
        </script>
    

    指令

    指令(directive),其实就是一个以v-开头的标签属性,例如:v-model 双向绑定指令。

    vue提供了一些指令,这些指令都是以v-开头,他们可以扩展标签的原有功能。这些指令的值,可以是js表达式,当关联js表达式依赖的数据发生变化,对应的指令就会产生作用。

    扩展功能:

    • 输入框双向绑定
    • 标签的显示隐藏
    • 标签显示的内容

    学习vue,主要就是要学习两个地方的内容:

    • Vue实例(vue实例与三大件)
    • 模板(视图)中的规则:插件表达式,指令

    v-text和v-html

    目标:能够使用v-text和v-html去更新标签内容。

    这组指令作用:

    • 更新标签的内容
    • 根据数据进行更新

    具体的作用:

    • v-text 更新标签的内容,格式是文本,和 innerText 相似。
    • v-html 更新标签的内容,格式是html,和 innerHTML 相似。

    在代码中体验:

    <div id="app">
            <h3>v-html,v-text</h3>
            <!-- {{}}可以用来设置标签中的部分内容 -->
            <p>学习内容:{{str}}</p>
    
            <p>{{str}}</p>
            <!-- v-text:设置标签中的 全部内容 -->
            <p v-text="str"></p>
            <!-- v-text:设置标签中的 
                如果这里内容是html字符串,它会转义一下,只是显示字符串
                而不会显示成对应的dom结构 -->
    
            <div v-text="strHtml"></div>
    
            <!-- v-html用来设置标签中的内容。与v-text不同,它直接解析其中的
            html结构,并渲染 -->
            <div v-html="strHtml"></div>
            
        </div>
    
    
        <script>
            // v-text : ===> innerText
            // v-html : ===> innerHTML
            const vm = new Vue({
                el: "#app",
                data: {
                    str: 'vue',
                    // 有时,从后端取回来的数据是一个html字符串。
                    // 例如:获取文章详情,取回来就是一html字符串。
    
                    strHtml: '<h1>vue</h1>'
                }
            })
        </script>
    

    总结:

    • v-text 更新 纯文本
    • v-html 更新 html内容

    v-show和v-if

    功能

    能够使用v-show和v-if去控制标签的显示隐藏。

    格式

    <元素 v-show="布尔值"></元素>
    <元素 v-if="布尔值"></元素>
    

    这对指令的共同点:都能控制元素的是否可见

    这对指令的不同点:

    • v-show是通过 display:none来控制隐藏
    • v-if 是通过动态创建和移除元素。

    示例

    <div id="app">
            <h3>v-if,v-show</h3>
            <div v-if="isVisiable">
                我是通过v-if来控制是否可见!
            </div>
    
            <div v-show="isVisiable">
                我是通过v-show来控制是否可见!
            </div>
            
        </div>
    
        <script>
            // 作用:控制标签的可见与不可见
    
            // 格式:
            // <元素 v-show="布尔值"></元素>
            // <元素 v-if="布尔值"></元素>
    
            // 如果是false,则不可见,如果是true,则可见
    
            // 区别:
            // 对于v-if,如果为false,则,在页面根本就不生成这个dom。
            //     所以不可见。
            // 对于v-show,如果为false,则,在页面有这个dom,display:none。
            //     所以不可见。
    
     
            const vm = new Vue({
                el: "#app",
                data: {
                    isVisiable: false
                }
            })
            setInterval(function() {
                vm.isVisiable = !vm.isVisiable
            },5000)
        </script>
    

    总结:区分下使用场景:

    • v-show 性能较好,对应需要频繁切换显示与隐藏的功能,可以使用v-show。
    • v-if 减少标签,状态切换次数少的时候,使用使用v-if

    v-on

    功能

    v-on指令的作用是:指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

    格式

    三种使用格式

    # 格式一:把要执行的代码直接写在""内部。适合少量代码
    <标签 v-on:事件名="要执行的代码"></标签>
    # 格式二:指向methods中的定义的函数
    <标签 v-on:事件名="methods中的函数"></标签>
    # 格式二:指向methods中的定义的函数,并传入参数
    <标签 v-on:事件名="methods中的函数(实参)"></标签>
    

    说明:

    示例

    <div id="app">
            <h3>v-on</h3>
            <div v-show="isVisiable">
                内容
            </div>
            <!-- 格式一:把要执行的代码直接写在""内部。适合少量代码 -->
            <button v-on:click="isVisiable=true">显示内容</button>
            <button v-on:click="isVisiable=false">隐藏内容</button>
    
            <!-- 格式二:指向methods中的定义的函数 -->
            <!-- 加与不加()一样:v-on:click="f1()" 与 v-on:click="f1" -->
            <button v-on:click="f1">调用methods中的函数</button>
    <br>
             <!-- 格式三:指向methods中的定义的函数 -->
             <!-- 注意:
             1. 如果要传入参数,则必须要加()
             2. 如果传入当前这个事件的事件对象,则传入固定名字 $event -->
    
            <button v-on:click="f2(10)">调用methods中的函数传入10</button>
            <br>
            <button v-on:click="f3(11,$event)">调用methods中的函数传入11,传入事件对象</button>
        </div>
    
        <script>
            // 功能: v-on 用来监听事件
    
            // 格式:
            // 格式一:把要执行的代码直接写在""内部。适合少量代码
            // <标签 v-on:事件名="要执行的代码"></标签>
    
            // 事件名:就是所有的dom原生事件 
            //        click,input,mouseenter,blur,......
    
            // 格式二:指向methods中的定义的函数
            // <标签 v-on:事件名="methods中的函数"></标签>
    
            // 格式三:指向methods中的定义的函数,并传入参数
            // <标签 v-on:事件名="methods中的函数(实参)"></标签>
    
     
            const vm = new Vue({
                el: "#app",
                data: {
                    isVisiable: false
                },
                methods: {
                    f1 () {
                        console.log("f1被调用")
                        alert(1)
                        this.isVisiable = true
                    },
                    f2 (m) {
                        alert(m)
                        console.log(m)
                    },
                    // 形参名m,eventObj。这两名,是可以自己定义的。
                    f3 (m, eventObj) {
                        console.log(m, eventObj)
                    }
    
                }
            })
           
        </script>
    

    总结:绑定函数的时候带不带括号?

    • 如果你需要接受事件触发的默认传参,不带括号
    • 如果你需要自己来进行传参,需要带括号,自己传实参
    • 如果什么参数都不要,带不带无所谓

    案例-折叠面板

    在这里插入图片描述

    用v-on和v-show实现折叠面板

    <div id="app">
        <h2>案例:折叠面板</h2>
        <div class="box">
            <div class="title" >
                <h4>我是标题</h4><span class="btn" @click="isOpen=!isOpen">{{isOpen ? '收起' : '展开'}} </span>  
            </div>
            <div class="container" v-show="isOpen">
                我是内容
                <br>
                我是内容
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isOpen: false
            }
        })
    </script>
    

    补充-修饰符

    <div id="app">
            <h3>v-on 修饰符</h3>
            <div v-on:click="hClickDiv">
                div
                <button @click="hClickBtn">按钮</button>
                <br>
                <button v-on:click.stop="hClickBtn">点击按钮不会冒泡</button>
                <br>
                <a href="http://www.baidu.com" v-on:click="hClickA">百度</a>
                <br>
                <a href="http://www.baidu.com" v-on:click.prevent="hClickA">不跳转百度</a>
            
                <br>
                <a href="http://www.baidu.com" v-on:click.prevent.stop="hClickA">不跳转百度不冒泡</a>
            
            </div>    
         
        </div>
        <script>
            // vue中的事件也有冒泡机制。
            // 在子元素上的点击事件,也会触发父元素上的点击事件。
            
            // 如果要阻止冒泡,只需给事件添加个修饰符.stop
            //     格式: 事件名.stop
            //     示例:click.stop
    
            // 如果要阻止默认行为,只需给事件添加个修饰符.prevent
            //     格式: 事件名.prevent
            //     示例:click.prevent
    
            // 如果需要,也可以一起使用,相当于两个效果叠加
            //     格式: 事件名.prevent.stop
            //     示例:click.prevent.stop
    
            // v-on: ----简写成---> @
    
            const vm = new Vue({
                el: "#app",
                methods: {
                    hClickDiv () {
                        console.log("hClickDiv")
                    },
                    hClickBtn (){
                        console.log("hClickBtn")
                    },
                    hClickA () {
                        console.log('hClickA')
                    }
                }
            })
           
        </script>
    

    v-for 列表渲染

    功能

    快速批量生成列表结构

    格式

    格式1:完整格式

    <元素 v-for="(遍历变量,索引变量) in 可遍历的数据项" :key="唯一的id"></元素>
    

    格式2:简写格式

    在完整格式的基础上,可以省略 :key 和 索引变量。

    <元素 v-for="遍历变量 in 可遍历的数据项"></元素>
    

    遍历目标

    对于v-for指令,可遍历的数据项可以是:

    • 数组
    • 对象
    • 数值

    代码

    <div id="app">
        <h2>v-for</h2>
        <div class="box">
            <h4>1. 对数组进行遍历</h4>
            <ul>
                <li v-for="(item,idx) in hobbies">{{idx}} - {{item}}</li>
            </ul>
        </div>
        <div class="box">
            <h4>2. 对对象进行遍历</h4>
            <span v-for="(item,prop,idx) in info">{{idx}}-{{prop}}-{{item}}</span>
        </div>
        <div class="box">
            <h4>3. 对数值进行遍历</h4>
            <span v-for="item in 10">{{item}},</span>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                info: {name: '小张', age: 18, height: '150'},
                hobbies: ['唱歌', '跳舞', '打篮球']
            }
        })
    </script>
    

    使用了v-for指令的元素,在其内部可以通过插值表达式来访问遍历变量和循环变量。

    v-bind

    作用

    动态绑定标签上的属性的值。(标签上的属性不能使用插值表达式来设置)。

    例如:如何动态设置img的内容?

    格式

    <元素 v-bind:属性名1="值1" v-bind:属性名2="值3"></元素>
    

    v-bind指令有简写用法 : 冒号,例如:

    <img :src="data数据">
    

    演示代码

    <div id="app">
            <h3>v-bind</h3>
            <!-- 如果去修改src属性? -->
            <!-- <img alt="se" src="http://img3m8.ddimg.cn/93/1/61888458-1_b_2.jpg"> -->
            <img alt="se" :src="imgSrc" :title="title">
            <br>
            <img alt="se" v-bind:src="imgSrc" v-bind:title="title">
            <button v-on:click="hClick">改成11</button>
        </div>
        <script>
            // 作用 : 动态绑定标签上的属性的值
            // 格式 :
            //  <元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
            // 简写:
            //  v-bind:  ----简写---> :
    
            const vm = new Vue({
                el: "#app",
                data: {
                    title: 'se',
                    imgSrc: 'http://img3m8.ddimg.cn/93/1/61888458-1_b_2.jpg'
                },
                methods: {
                    hClick () {
                        // 设为 11
                        this.title = "11不香吗?"
                        this.imgSrc = 'http://img3m0.ddimg.cn/83/24/61887260-1_b_1.jpg'
                    }
                }
                    
                
            })
           
        </script>
    

    练习题

    如下两种写法的区别是什么?

    <div id="myId"></div>
    <div :id="myId"></div>
    

    案例:购物车

    素材代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            h4,
            p {
                margin: 0;
                font-weight: normal;
            }
            a{text-decoration: none;}
    
            body{
                background-color: #eee;
            }
            #app{
                background-color:#fff;
                width: 900px;
                margin: 50px auto;
                text-align: center;
                box-shadow: 3px 3px 3px rgba(0 , 0, 0, 0.5);
                padding:1em 2em;
            }
    
            .list {
                padding: 1em;
                width: 100%;
                box-sizing: border-box;
                display: flex;
                flex-wrap:wrap;
            }
    
            .book {
                position: relative;
                flex-basis: 22%;
                margin-right:2%;
                margin-bottom:1em;
                text-align: center;
                background-color: #fff;
                padding: 1em 0;
                transition: all .2s linear;
            }
    
            .book:hover {
    
                box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
                transform: translate3d(0, -2px, 0);
    
            }
    
            .title {
                line-height: 2em;
                margin: 0;
                padding: 0;
            }
    
            .figure img {
                width: 150px;
                height: 150px;
            }
    
            .desc {
                margin: 0;
                font-size: 16px;
            }
    
            .price {
                margin: 0;
                font-size: 14px;
            }
    
            .btn {
                cursor: pointer;
                position: absolute;
                right: 0.8em;
                top: 0.8em;
                border: none;
                color: #ff6700;
                padding: .5em .5em;
                font-size: 12px;
            }
    
            .btn:active {
                border: none;
            }
    
            .btn:hover {
                background-color: #ff6700;
                color: #fff
            }
    
            .cart {
                border: 1px solid #eee;
                background-color: #fff;
                text-align: center;
                position: fixed;
                padding: 1em;
                right: 100px;
                top: 200px;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <h3>我的购物车</h3>
            <div class="list">
                <div class="book" title="当你学会独处">
                    <a href="">
                        <div class="figure">
                            <img src="http://img3m8.ddimg.cn/70/15/28522168-1_l_3.jpg" alt="当你学会独处(学会独处,学会与自己谈话)">
                        </div>
                        <h4 class="title" title="当你学会独处">当你学会独处</h4>
                        <p class="desc"></p>
                        <p class="price"><span class="num">29.9</span></p>
                    </a>
                    <button class='btn' title="移出购物车">-</button>
                </div>
                <div class="book" title="JavaScript高级程序设计">
                    <a href="">
                        <div class="figure">
                            <img src="http://img3m3.ddimg.cn/2/21/22628333-1_b_2.jpg"
                                alt=" JavaScript高级程序设计">
                        </div>
                        <h4 class="title" title="JavaScript高级程序设计">JavaScript高级程序设计</h4>
                        <p class="desc"></p>
                        <p class="price"><span class="num">78</span></p>
                    </a>
                    <button class='btn' title="移出购物车">-</button>
                </div>
                <div class="book" title="断舍离">
                    <a href="">
                        <div class="figure">
                            <img alt="断舍离" src="http://img3m3.ddimg.cn/68/20/23271503-1_l_10.jpg"
                                title="断舍离">
                        </div>
                        <h4 class="title" title="断舍离">断舍离</h4>
                        <p class="desc"></p>
                        <p class="price"><span class="num">29.9</span></p>
                    </a>
                    <button class='btn' title="移出购物车">-</button>
                </div>
                <div class="book" title="王子与贫儿">
                    <a href="">
                        <div class="figure">
                            <img src="http://img3m0.ddimg.cn/67/20/28535530-1_l_3.jpg"
                                alt="王子与贫儿">
                        </div>
                        <h4 class="title" title="王子与贫儿">王子与贫儿</h4>
                        <p class="desc"></p>
                        <p class="price"><span class="num">39.9</span></p>
                    </a>
                    <button class='btn' title="移出购物车">-</button>
                </div>
                <div class="book" title="高效能人士的七个习惯">
                    <a href="">
                        <div class="figure">
                            <img src="http://img3m2.ddimg.cn/3/4/25253022-1_b_11.jpg"
                                alt="高效能人士的七个习惯">
                        </div>
                        <h4 class="title" title="高效能人士的七个习惯">高效能人士的七个习惯</h4>
                        <p class="desc"></p>
                        <p class="price"><span class="num">59.3</span></p>
                    </a>
                    <button class='btn' title="移出购物车">-</button>
                </div>
            </div>
        </div>
        <script>
            var bookList = [
                {
                    name: '当你学会独处',
                    price: 29.9,
                    picSrc: 'http://img3m8.ddimg.cn/70/15/28522168-1_l_3.jpg'
                },
                {
                    name: 'JavaScript高级程序设计',
                    price: 78,
                    picSrc: 'http://img3m3.ddimg.cn/2/21/22628333-1_b_2.jpg'
                },
                {
                    name: '断舍离',
                    price: 29.9,
                    picSrc: 'http://img3m3.ddimg.cn/68/20/23271503-1_l_10.jpg'
                },
                {
                    name: '王子与贫儿',
                    price: 39.9,
                    picSrc: 'http://img3m0.ddimg.cn/67/20/28535530-1_l_3.jpg'
                },
                {
                    name: '高效能人士的七个习惯',
                    price: 59.3,
                    picSrc: 'http://img3m2.ddimg.cn/3/4/25253022-1_b_11.jpg'
                }
            ]
        </script>
    </body>
    
    </html>
    

    基本实现

    • v-for循环生成dom结构

    • :src,:title,:alt 绑定属性

    • v-on:click绑定点击

    展开全文
  • Web前端常用网站

    2018-03-06 09:29:40
    最近一直搞前端开发,整理下前端用一些常用素材,分享给大家框架Vue:https://cn.vuejs.org/iview:https://www.iviewui.com/插件类Jquery插件库:http://www.jq22.com/UI类Bootstrap模板大全:...
  • 前端系列教程之常用网页导航

    千次阅读 2018-12-09 17:35:02
    ui框架 Element - 网站快速成型工具 Bootstrap中文网 jQuery MiniUI - 快速开发WebUI 飞冰 - 让前端开发简单而友好 layui - 经典模块化前端UI框架 iView - A high quality UI Toolkit based on Vue.js ...
  • element ui 就是基于vue一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。 1.3 由来 饿了么前端团队 基于vue进行开发并且进行了开源 element ui 中提供全部都是封装好组件。 2.安装Element UI ...
  • 第一章 vue入门

    万次阅读 2020-10-24 08:56:45
    vue是一个前端开发框架,用于降低UI复杂度 UI:user interface用户界面 3、vue的特点 渐进式 响应式 组件化 4、体验vue代码 开发工具:visual studio code 常用插件 Auto Rebane Tag:能够自动更改结束标签 Live ...
  • 随着 WEB UI 框架 ( EasyUI/Jquery UI/Ext/DWZ/VUE/Boostrap) 等逐渐成熟,系统界面逐渐实现统一化,代码生成器也可以生成统一规范界面! 代码生成+手工MERGE半智能开发将是新趋势,单表数据模型和一对多数据...
  • 后端使用java ssm框架 数据库使用最常用的Mysql 另外这个后端包含逻辑图,对于在学习java ssm 可以在开发文档特殊需要可以再开发!小编觉得这源码对于学习Web脚本帮助很大, 先看看别人怎么写代码,对于自己有很...
  • 你不知道那些事</a></li><li><a href="https://github.com/RubyLouvre/newland/issues/6">github上值得关注前端项目</a></li><li><a href="http://island205.github.io/Single-Page-App-Break/index.html">单页...
  • 一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念<code>Web UI框架。 <code>star:9900</code></li><li><a href="https://github.com/meteor/meteor">meteor</a> 一个超简单纯<code>javascript...
  • 适合企业后台管理网站的快速开发场景,不论是对于单体和微服务都有支持。 SpringBlade :SpringBlade 是一个由商业级项目升级优化而来的 SpringCloud 分布式微服务架构、SpringBoot 单体式微服务架构并存的综合型...
  • vue-shop( Vue全家桶开发电商管理系统(Element-UI 重制上线版)) 2020.06-2020.07 传送门 Vue-MVVM(:star:剖析vue实现原理,动手实现一个简单版mvvm:+1:) 2020.07 传送门 :bulb:前言 前端还是一个年轻...
  • Django框架对session支持 视图函数中cookie读写操作 Day45 - 报表和日志 通过HttpResponse修改响应头 使用StreamingHttpResponse处理大文件 使用xlwt生成Excel报表 使用reportlab生成PDF报表 使用ECharts...
  • 写了100多篇原创文章,我常用的在线工具网站推荐给大家! 线上项目出BUG没法调试?推荐这款阿里开源诊断神器! 被我用烂DEBUG调试技巧,专治各种搜索不到问题! Github标星 8K+,免费又好用Redis客户端工具...
  • 后端开发书架2015 2.0版.epub 手淘 H5 性能最佳实践.epub 打造android ORM框架.epub 技术选型:喷子、胆量和产品意识.epub 把《The Swift Programming Language》读薄.epub 把《把时间当作朋友》读薄.epub 把...
  • 后端开发书架2015 2.0版.epub 手淘 H5 性能最佳实践.epub 打造android ORM框架.epub 技术选型:喷子、胆量和产品意识.epub 把《The Swift Programming Language》读薄.epub 把《把时间当作朋友》读薄.epub 把...
  • chrome开发中心(chrome内核已转向blink) https://developer.chrome.com/extensions/api_index.html safari开发中心 https://developer.apple.com/library/safari/navigation microsoft js参考 ...
  • ✅ PHP中文站:最专业PHP资源网站:PHP教程, PHP中文手册, PHP开发工具, PHP框架文档大全!- 更多介绍 2020年7月23号添加 功夫熊猫(北京) - Github ✅ 名校讲座: 收集发布北京上海等地名校公开讲座,让更...
  • Kendo UI 开发教程 - v1.1.epub Learn Javascript - v1.0.epub React Native 官方文档中文版 - v1.3.epub React 中文版 - v1.1.epub React 入门教程 - v1.0.epub Vaadin Web 开发教程 - v1.0.epub Vue.js 教程 - v...
  • Kendo UI 开发教程 - v1.1.epub Learn Javascript - v1.0.epub React Native 官方文档中文版 - v1.3.epub React 中文版 - v1.1.epub React 入门教程 - v1.0.epub Vaadin Web 开发教程 - v1.0.epub Vue.js 教程 - v...

空空如也

空空如也

1 2
收藏数 23
精华内容 9
关键字:

vue开发网站的常用ui框架

vue 订阅