• Vue入门及介绍，基础使用

    Vue快速使用

    1 vue:就是一个js框架，跟jquery很像
    2 cdn，下载到本地，script中引入
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
​
<body>
<div id="app">
​
{{ message }}
    <br>
    <h1>{{  name }}</h1>
</div>
​
</body>
​
<script>
    //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello world!',
            name:'lqz'
        }
    })
</script>
</html>

    前端现状

    1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下

    Vue介绍

    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

    与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用

    Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

    渐进式框架

    可以一点一点地使用它，只用一部分，也可以整个项目都使用它，就是一个前端项目

    网站

    版本

    • 1.X：使用得较少

    • 2.X：普遍使用

    • 3.X：刚出没多久，只有Beta版

    Vue特点

    易用

    • 通过 HTML、CSS、JavaScript构建应用

    灵活

    • 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

    高效

    • 20kB min+gzip 运行大小

    • 超快虚拟 DOM

    • 最省心的优化

    MVVM架构

    MVVM介绍

    1 M(数据层)----V(页面展示)----VM（vm）

    2 双向数据绑定：JS中变量变了，HTML中数据也跟着改变​

    MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式
​
Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中
View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，
    　　　　　　 data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）

    MVVM的特性

    • 低耦合：视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变

    • 可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View重用这端视图的逻辑（以此减少代码冗余）

    • 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计

    • 可测试：界面元素是比较难以测试的，而现在的测试可以针对ViewModel来编写

     

    单页面开发和组件化开发

    组件化开发：
    类似于DTL中的include，每一个组件的内容都可以被替换和复用
       
    单页面开发：  
    只需要1个页面，结合组件化开发来替换页面中的内容
    页面的切换只是组件的替换，页面还是只有1个index.html

    nodejs介绍

    1 javascript:只能运行在浏览器中，解释型语言，浏览器里有它的解释器
    2 谷歌的V8引擎，抠出来，运行在操作系统之上，c写了一些底层包
    3 nodejs：解释器，写javascript的代码
    4 前端工程师，不用学后端语言，只会js，就可以写后端了
    5 node：python，6 npm：pip3，用来安装第三方包​​
    ​
    ## 前端开发的ide
- WebStorm 
     是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”
    “最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

- VS code
    Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows
　　和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对
    　　JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（
    　　例如.NET和Unity）扩展的生态系统。

- HBuilder
    HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 [1]  HBuilder的编写用到了Java、C、Web和Ruby。
    　　 HBuilder本身主体是由Java编写。

- Sublime Text
    Sublime Text 是一个文本编辑器（收费软件，可以无限期试用，但是会有激活提示弹窗），同时也是一个先进的代码编辑器。
    　　 Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。Sublime Text具
    　　 有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text的主
    　　 要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨
    　　 平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。
​
​
## 我们开发用pycharm
    - webstorm和pycharm是一家，只需要装vue插件

    模板语法

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值语法</title>
    <script src="./js/vue.js"></script>
</head>
<body>
​
<div id="app">
    <h1>字符串：{{ name }}</h1>
    <h1>数值：{{ age }}</h1>
    <h2>数组：{{ name_list }}</h2>
    <h3>对象：{{ person_info }}</h3>
    <h4>{{ link }}</h4>
    <h4>对象取值：{{ person_info.age }}</h4>
    <h4>数组取值：{{ name_list[1] }}</h4>
    <h4>运算：{{ 10+20+30 }}</h4>
    <h4>三元运算：{{ 10>20?'是':'否' }}</h4>
​
</div>
​
​
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'geng',  //字符串
            age:18, //数值
            name_list: ['刘一', '陈二', '张三', '李四', '王五', '赵六'], //对象
            person_info:{name:'geng',age:18},
            link:'<a href="http://www.baidu.com">点我</a>'
        }
    });
</script>
</html>

    指令

    文本指令,事件指令

    文本指令:
    v-text   标签内容显示js变量对应的值
v-html   让HTML渲染成页面
v-if     放1个布尔值：为真 标签就显示；为假 标签就不显示
v-show   放1个布尔值：为真 标签就显示；为假 标签就不显示
​
v-show与 v-if的区别：
v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入 标签
    ​
    事件指令:
    v-on:缩写成@
v-on:click='函数'
@click='函数'
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
​
<div id="app">
    <h1 v-html="link"></h1>
    <h1 v-text="name"></h1>
    <h1 v-text="link"></h1>
    <h1></h1>
​
    <button @click="handleClick">若隐若现</button>
    <div v-show="show">
        <h2>我只要你一滴泪的时间，听你形容他狠心的脸</h2>
    </div>
​
​
    <button @click="handle1">点我</button>
    <div v-if="if_show">
        <h2>那些快乐的梦都变丑了，你看不见吗</h2>
    </div>
​
    <div></div>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'geng',
            link: '<a href="http://www.baidu.com">点我</a>',
            show: true,
            if_show: true
        },
        methods: {
            handleClick() {
                this.show = !this.show
            },
            handle1() {
                this.if_show = !this.if_show
            }
        }
    })
</script>
</html>

    属性指令

    v-bind:src/href/name/='变量'
 缩写成
:src='变量'
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .red{
            background-color: red;
        }
        .purple{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div id="app">
        <h1><a v-bind:href="link">点我看美女</a></h1>
    <br>
        <img :src="img" alt="">
​
    <div :class="isActive?'red':'purple'">
        <h1>快乐的一只小青蛙</h1>
    </div>
​
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'lqz',
            isActive:false,
            link:'http://www.cnblogs.com',
            img:'https://tva1.sinaimg.cn/large/00831rSTly1gcy7m2g0j9j310q0gqjtv.jpg',
        }
    })
</script>
</html>

    style和class的使用

    #js数组操作，增加值，修改值，删除值，vue的页面都会变
数据的绑定
语法
:属性名=js变量/js语法
​
:class=’js变量、字符串、js数组’
class：三目运算符、数组、对象{red: true}
​
:style=’js变量、字符串、js数组’
style：三目运算符、数组[{backgreound: ‘red’},]、对象{background: ‘red’}

    可以检测到变动的数组页面也跟着编号的操作：

    push：最后位置添加

pop：最后位置删除

shift：第一个位置删除

unshift：第一个位置添加

splice：切片

sort：排序

reverse：反转

    检测不到变动的数组页面不变化的操作：

    filter()：过滤

concat()：追加另一个数组

slice()：

map()：

原因：

作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .red{
            background-color: red;
        }
        .purple{
            background-color: aquamarine;
        }
        .font_1{
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <div :class="class_obj">
        <h1>快乐的一只小青蛙</h1>
    </div>
    <br>
    <div :style="style_obj">
        <h1>忧伤的一只小克马</h1>
    </div>
    <br>
    <button @click="handle">点击变大</button>
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            // class_obj:'purple'
            // class_obj:['red','font_1']
            // class_obj:{red:true,font_1:false}
            // style_obj:'red'
            style_obj: [{background:'green'},{fontSize:'10px'}]
            // style_obj: {background:'blue',fontSize:'20px'}
        },
        methods:{
            handle(){
                this.style_obj.fontSize='90px'
            }
        }
​
    })
</script>
</html>

    条件渲染

    指令        释义
v-if       相当于： if
v-else      相当于：else
v-else-if   相当于：else if
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
​
    </style>
</head>
<body>
<div id="app">
    <div v-if="a=='A'">A</div>
    <div v-else-if="a=='B'">B</div>
    <div v-else>其他</div>
</div>
</body>
​
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a:'A'
        },
        methods: {
            handle() {
                this.style_obj.fontSize = '90px'
            }
        }
    })
</script>
</html>

    列表渲染(购物车)

    v-if+v-for+v-else控制购物车商品的显示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="col-md-6 col-md-offset-3">
    <div class="panel panel-primary">
            <button @click="handld">点我加载数据</button>
            <hr>
            <table class="table table-condensed" v-if="!goods.length==0">
                <thead>
                <tr>
                    <th>商品名字</th>
                    <th>价格</th>
                    <th>数量</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="good in goods">
                    <td class="info">{{good.name}}</td>
                    <td class="success">{{good.price}}</td>
                    <td class="warning">{{good.count}}</td>
                </tr>
                </tbody>
            </table>
            <div v-else>
                啥也没有
            </div>
    </div>
</div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goods: []
        },
        methods: {
            handld() {
                //去后台加载数据
                this.goods = [{name: '特斯拉', price: 10000, count: 1}, {name: '包子', price: 3, count: 10}, {name: '花卷', price: 5, count: 12}]
            }
        }
    })
</script>
</html>
    View Code

    v-for遍历数组(列表)、对象(字典)、数字

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>循环数组</h1>
    <ul class="list-group">
​
        <li class="list-group-item" v-for="(value,index) in list">第{{index}}个人-----名字是：{{value}}</li>
​
    </ul>
    <br>
    <h1>循环对象</h1>
    <ul class="list-group">
​
        <li class="list-group-item" v-for="o in obj">{{o}}</li>
​
    </ul>
     <ul class="list-group">
​
        <li class="list-group-item" v-for="(value,key) in obj">key是：{{key}}《---》value是：{{value}}</li>
​
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: ['张三', '李四', '王五', '赵六'],
            obj: {name: 'lqz', age: '18', sex: '男'}
​
        }
    })
</script>
</html>
    View Code

    事件处理

     事件    
    		 
               释义
    		 
    input
    		 
    当输入框进行输入的时候 触发的事件
    		 
    change
    		 
     当元素的值发生改变时 触发的事件
    		 
    blur
    		 
    当输入框失去焦点的时候 触发的事件

    过滤案件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <style>
​
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-offset-3">
​
            <div id="app">
                <!--                <input type="text" v-model="name" placeholder="光标移开触发-blur" v-on:blur="handle_blur">-->
                <!--                <input type="text" v-model="name" placeholder="请输入要搜索的内容-change" v-on:change="handle_change">-->
<!--                <input type="text" v-model="name" placeholder="请输入要搜索的内容-input" v-on:input="handle_input">-->
                <input type="text" v-model="name" placeholder="请输入要搜索的内容-input" @input="handle_input">
                <ul>
                    <li v-for="l in list">{{l}}</li>
                </ul>
​
            </div>
​
        </div>
​
    </div>
​
​
</div>
​
​
</body>
​
<script>
​
​
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            list_old: ['a', 'atm', 'atmtw', 'atmtwxx', 'b', 'body', 'bodyxx', 'tm', 'm'],
            list: ['a', 'atm', 'atmtw', 'atmtwxx', 'b', 'body', 'bodyxx', 'tm', 'm']
        },
        methods: {
            handle_input() {
                //只要输入框文字发生变化，就会触发它
                //根据输入的值，过滤list
                // let _this=this
                // this.list.filter(function (item) {
                //     console.log(_this.list_old)
                //
                // })
​
​
                this.list = this.list_old.filter(item => {
                    if (item.indexOf(this.name) > -1) {
                        return true
                    } else {
                        return false
                    }
​
                })
​
            },
            handle_change() {
                console.log('change')
                console.log(this.name)
            },
            handle_blur() {
                console.log('blur')
                console.log(this.name)
            },
        }
​
​
    })
​
    // let list = ['a', 'atm', 'atmtw', 'atmtwxx', 'b', 'body', 'bodyxx', 'tm', 'm']
​
    // let list_new=list.filter(function (item) {
    //     if(item.length>=3){
    //         return true
    //     }else{
    //         return false
    //     }
    //
    // })
    //箭头函数---es6的语法
    // let list_new = list.filter(item => {
    //     if (item.length >= 3) {
    //         return true
    //     } else {
    //         return false
    //     }
    // })
    // console.log(list_new)
    //
    //
    // var a = (data, a) => {
    //
    // }
    // var b = function (data, a) {
    //
    //
    // }
​
​
    let a='efy'
    let str_a='abcdefg'
    console.log(str_a.indexOf(a))
​
</script>
​
</html>
    View Code

    事件修饰符

    事件修饰符             
      　　　　　　　　     释义
    .stop 
    只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
    .self 
    只处理自己的事件，子控件冒泡的事件不处理
    .prevent 
    阻止a链接的跳转
    .once 
    事件只会触发一次（适用于抽奖页面）
    		 


    使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
​
用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击

    阻止事件冒泡

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <style>
​
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-offset-3">
​
            <div id="app">
                <div v-on:click="div_click">
                    <button @click.stop="button_click">点我看美女</button>
                </div>
​
                <hr>
                <div v-on:click.self="div_click">
                    <button @click="button_click">点我看美女2</button>
                    <span>dadfafdasdfadsf</span>
​
                </div>
​
​
                <hr>
                <a href="http://www.baidu.com" @click.prevent="handle_a">点我看没办</a>
​
                <hr>
                <button @click.once="handle_one">我只能点一次</button>
            </div>
​
        </div>
​
    </div>
​
​
</div>
​
​
</body>
​
<script>
​
​
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            div_click() {
                alert('div被点击了')
            },
            button_click() {
                alert('button被点击了')
            },
            handle_a(){
                alert('a链接跳转阻挡了')
                location.href='http://www.baidu.com'
            },
            handle_one(){
                alert('我只会谈一次')
            }
        }
​
​
    })
​
</script>
​
</html>

    按键修饰符

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
​
</head>
<body>
​
<div id="app">
<!--    <input type="text" @keyup.enter="handle" v-model="search">-->
<!--    <input type="text" @keyup="handle" v-model="search">-->
    <input type="text" @keydown="handle" v-model="search">
​
</div>
</body>
​
<script>
​
    var vm = new Vue({
        el: '#app',
        data: {
            search:''
        },
        methods: {
            handle(){
                console.log('enter建被放开了')
                location.href='https://www.baidu.com/s?wd='+this.search
            }
        }
    })
</script>
​
</html>

    数据双向绑定

    v-model的使用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="input-group">
                    <label for="name">用户名</label>
                    <!-- v-model数据的双向绑定，只针对input的属性 -->
                    <input class="form-control" type="text" v-model="name">
                </div>
                <div class="input-group">
                    <label for="password">密码</label>
                    <input class="form-control" type="password" v-model="password"><span>{{error}}</span>
                </div>
                <hr>
                您输入的名字是：{{name}}
                <hr>
                <button @click="submit_1">登录</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            name: '',
            password: '',
            error: '',
        },
        methods: {
            submit_1() {
                if (this.name == 'lqz' && this.password == '123') {
                    location.href = 'http://www.baidu.com'
                } else {
                    this.error = '用户名或密码错误'
                }
            }
        }
    })
</script>
</html>

    表单控制

    checkbox选中

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="input-group">
                    <label for="name">用户名</label>
                    <!-- v-model数据的双向绑定，只针对input的属性 -->
                    <input class="form-control" type="text" v-model="name" placeholder="请输入用户名">
                </div>
                <div class="input-group">
                    <label for="password">密码</label>
                    <input class="form-control" type="password" v-model="password" placeholder="请输入密码">
                </div>
                <hr>
                您输入的名字是：{{name}}
                <hr>
                 <div class="input-group">
                     <label>记住密码：</label>
                     <input type="checkbox" v-model="check_1">
                     <input type="checkbox" v-model="radio_1">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            name: '',
            password: '',
            checkbox_1: false,
            radio_1:false,
        },
    })
</script>
</html>

    单选，多选

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="input-group">
                    <label for="name">用户名</label>
                    <!-- v-model数据的双向绑定，只针对input的属性 -->
                    <input class="form-control" type="text" v-model="name" placeholder="请输入用户名">
                </div>
                <div class="input-group">
                    <label for="password">密码</label>
                    <input class="form-control" type="password" v-model="password" placeholder="请输入密码">
                </div>
                <h4>单选</h4>
                <div class="input-group">
                    <input type="radio" v-model="sex" value="男">男
                    <input type="radio" v-model="sex" value="女">女
                    <input type="radio" v-model="sex" value="未知">未知
                    <br><br>您的性别：{{sex}}
                </div>
                <hr>
                 <h4>多选</h4>
                <div class="input-group">
                    <input type="checkbox" v-model="hobby" value="篮球">篮球
                    <input type="checkbox" v-model="hobby" value="足球">足球
                    <input type="checkbox" v-model="hobby" value="桌球">桌球
                    <input type="checkbox" v-model="hobby" value="棒球">棒球
                    <input type="checkbox" v-model="hobby" value="羽毛球">羽毛球
                    <input type="checkbox" v-model="hobby" value="乒乓球">乒乓球
                    <input type="checkbox" v-model="hobby" value="双色球">双色球
                    <br><br>您喜欢的球类：{{hobby}}
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            name: '',
            password: '',
            sex: '',
            hobby:[],
        },
    })
</script>
</html>

    购物车案例

    基础-结算

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本购物车计算商品价格</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <h2 class="text-center">购物车</h2>
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-condensed text-center">
                    <tr>
                        <td class="active">图片</td>
                        <td class="success">名称</td>
                        <td class="info">价格</td>
                        <td class="danger">数量</td>
                        <td class="warning">选择</td>
                    </tr>
                    <tr v-for="good in goods">
                        <td class="info"><img :src="good.img" alt="" width="40px" height="30px"></td>
                        <td class="danger">{{good.name}}</td>
                        <td class="warning">{{good.price}}</td>
                        <td class="success">{{good.count}}</td>
                        <!-- v-model绑定数据，value绑定商品对象 @change选中没选中都触发事件-->
                        <td class="active"><input type="checkbox" v-model="checkGroup" :value="good" @change="sumPrice"></td>
​
                    </tr>
                </table>
                选中的商品：{{checkGroup}}
                <br>
                总价格：{{sumPrice()}}
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            goods: [
                {id: 1, name: '汉堡', price: 16, count: 1, img: './img/hanbao.jpg'},
                {id: 1, name: '鸡肉卷', price: 10, count: 1, img: './img/jiroujuan.jpg'},
                {id: 1, name: '炸鸡', price: 28, count: 1, img: './img/zhaji.jpg'},
                {id: 1, name: '啤酒', price: 8, count: 1, img: './img/pijiu.jpg'},
                {id: 1, name: '可乐', price: 6, count: 1, img: './img/kele.jpg'},],
            checkGroup:[],
            // totalPrice：0 方式一需要在全局定义
        },
​
        methods: {
            // 方式一
                 // sumPrice(){
            //     this.totalPrice=0 //先置0再去改
            //     for (i in this.checkGroup){ // 这里的 i 是索引，每次根据索引取值
            //         this.totalPrice+=this.checkGroup[i].price*this.checkGroup[i].count
            //
            //     }
            //
            // }
            // 方式二
            // 函数内使用的vue中的变量，只要发生变化，函数会重新运算
            sumPrice(){
                let totalPrice = 0
                // for (i=0;i<this.checkGroup.length;i++){//索引循环
                for (i in this.checkGroup){ //迭代循环，在Vue当中是取值，在JS中第一个值是索引
                                  //只要checkGroup发生变化，就会重新运算，totalPrice也就跟着变化
                    totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
                }
                return totalPrice
            }
        },
    })
</script>
</html>

    进阶-全选/全不选

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本购物车计算商品价格</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <h2 class="text-center">购物车</h2>
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-condensed text-center">
                    <tr>
                        <td class="active">图片</td>
                        <td class="success">名称</td>
                        <td class="info">价格</td>
                        <td class="danger">数量</td>
                        <td class="warning">全选/不全选
                            <input type="checkbox" v-model="checkAll" @change="handleCheckAll">
                        </td>
                    </tr>
                    <tr v-for="good in goods">
                        <td class="info"><img :src="good.img" alt="" width="40px" height="30px"></td>
                        <td class="danger">{{good.name}}</td>
                        <td class="warning">{{good.price}}</td>
                        <td class="success">{{good.count}}</td>
                        <td class="active"><input type="checkbox" v-model="checkGroup" :value="good" @change="checkOne"></td>
​
                    </tr>
                </table>
                选中的商品：{{checkGroup}}
                <br>
                总价格：{{sumPrice()}}
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            goods: [
                {id: 1, name: '汉堡', price: 16, count: 1, img: './img/hanbao.jpg'},
                {id: 1, name: '鸡肉卷', price: 10, count: 1, img: './img/jiroujuan.jpg'},
                {id: 1, name: '炸鸡', price: 28, count: 1, img: './img/zhaji.jpg'},
                {id: 1, name: '啤酒', price: 8, count: 1, img: './img/pijiu.jpg'},
                {id: 1, name: '可乐', price: 6, count: 1, img: './img/kele.jpg'},],
            checkGroup:[],
        },
​
        methods: {
            sumPrice(){
                let totalPrice = 0
                for (i in this.checkGroup){ //迭代循环
                    totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
                }
                return totalPrice
            },
            handleCheckAll(){
                // 选中的长度等于所有商品长度
                if (this.checkGroup.length == this.goods.length){
                    this.checkGroup = [] //说明已经全选了，再点击就置空
                    this.checkAll = false  // 全不选按钮就是不选中状态
                }else {
                    this.checkGroup = this.goods  // 没有全选点击就全选
                    this.checkAll = true // 全选按钮就是就是选中状态
                }
            },
            checkOne(){
                // 选中的长度不等于所有商品长度
                if (this.checkGroup.length != this.goods.length){
                    this.checkAll = false // 全选按钮就是不选中状态
                }else {
                    this.checkAll = true // 否则全选按钮就是选中状态
                }
            }
        },
    })
</script>
</html>

    高级-带加减

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本购物车计算商品价格</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <h2 class="text-center">购物车</h2>
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-condensed text-center">
                    <tr>
                        <td class="active">图片</td>
                        <td class="success">名称</td>
                        <td class="info">价格</td>
                        <td class="danger">数量</td>
                        <td class="warning">全选/不全选
                            <input type="checkbox" v-model="checkAll" @change="handleCheckAll">
                        </td>
                    </tr>
                    <tr v-for="good in goods">
                        <td class="info"><img :src="good.img" alt="" width="40px" height="30px"></td>
                        <td class="danger">{{good.name}}</td>
                        <td class="warning">{{good.price}}</td>
                        <td class="success">
                            <button @click="good.count++">+</button>
                            {{good.count}}
                            <button @click="subtract(good)">-</button>
                        </td>
                        <td class="active"><input type="checkbox" v-model="checkGroup" :value="good" @change="checkOne">
                        </td>
​
                    </tr>
                </table>
                选中的商品：{{checkGroup}}
                <br>
                总价格：{{sumPrice()}}
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            goods: [
                {id: 1, name: '汉堡', price: 16, count: 1, img: './img/hanbao.jpg'},
                {id: 1, name: '鸡肉卷', price: 10, count: 1, img: './img/jiroujuan.jpg'},
                {id: 1, name: '炸鸡', price: 28, count: 1, img: './img/zhaji.jpg'},
                {id: 1, name: '啤酒', price: 8, count: 1, img: './img/pijiu.jpg'},
                {id: 1, name: '可乐', price: 6, count: 1, img: './img/kele.jpg'},],
            checkGroup: [],
        },
​
        methods: {
            sumPrice() {
                let totalPrice = 0
                for (i in this.checkGroup) { //迭代循环
                    totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
                }
                return totalPrice
            },
            handleCheckAll() {
                // 选中的长度等于所有商品长度
                if (this.checkGroup.length == this.goods.length) {
                    this.checkGroup = [] //说明已经全选了，再点击就置空
                    this.checkAll = false  // 全选按钮就是不选中状态
                } else {
                    this.checkGroup = this.goods  // 没有全选点击就全选
                    this.checkAll = true // 全选按钮 
                    就是  280就是选中状态
                }
            },
            checkOne() {
                // 选中的长度不等于所有商品长度
                if (this.checkGroup.length != this.goods.length) {
                    this.checkAll = false // 全选按钮就是不选中状态
                } else {
                    this.checkAll = true // 否则全选按钮就是选中状态
                }
            },
            subtract(good){
                if (good.count == 1){
                    good.count == 1
                }else {
                    good.count--
                }
            }
        }
    })
</script>
</html>

    v-model 进阶

    v-model 之 lazy、number、trim

    lazy：等待input框的数据绑定时区焦点之后再变化

    number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留

    trim：去除首尾的空格

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                 <div class="input-group">
                    <label>用户名：</label>
                    <input class="form-control" type="text" v-model="name" placeholder="native">
​
                </div>
                {{name}}
                <br>
                <div class="input-group">
                    <label >等待input框的数据绑定时区焦点之后再变化:</label>
                    <input class="form-control" type="text" v-model.lazy="name1" placeholder="lazy">
​
                </div>
                <br>
                 {{name1}}
                 <hr>
                 <br>
                <div class="input-group">
                    <label >数字开头，只保留数字，后面的字母不保留；字母开头，都保留：</label>
                    <input class="form-control" type="text" v-model.number="name2" placeholder="number">
​
                </div>
                 <br>
                 {{name2}}
                 <hr>
                <div class="input-group">
                    <label>去除首尾的空格：</label>
                    <input class="form-control" type="text" v-model.trim="name3" placeholder="trim">
                </div>
               <br>
                 {{name3}}
                 <hr>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            name: '',
            name1: '',
            name2: '',
            name3: '',
        },
    })
</script>
</html>
    

    

    
    从来就没有正确的选择，我们只不过是要努力奋斗，使当初的选择变得正确。

    

    
    
          
    • 

          
  • 

            相关阅读:
    
            
              Beta版本冲刺第二天
                
    项目冲刺-第十天
                
    项目冲刺-第五天
                
    用例图练习
                
    软件案例分析（微软必应词典客户端）
                
    第二次作业——结对项目之需求分析与原型模型设计
                
    git for windows 入门随笔
                
    软件工程的实践项目的自我目标
                
    Android的开发环境的发展演变
                
    我的软件工程实践的总结
                
                    
          
    • 
          
  • 
            原文地址：https://www.cnblogs.com/gfeng/p/14747697.html
          
    • 

        

      



      
      

        

        

      

    

  


  

  
Copyright © 2020-2023 
  润新知