VUE 入门 01

什么是VUE？

它是构建用户界面的JavaScript框架（让他自动生成js、css、html）

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

使用

引入vue.js

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

思想

声明式渲染

插值语法：在vue为{{}}，react{}，angular{{}}

表单：v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- http-equiv与content属性是固定的 用ie的最高版本渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--  seo  搜索引擎  -->
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 数据绑定 -->
        {{ message }}
    </div>

    <script>
        //  创建了一个vue对象
        var app = new Vue({
            el: '#app', //找标签 表示当前这个元素开始使用vue
            data: {
                // 数据属性
                message: 'hello vue'
            }
        })
    </script>
</body>
</html>

Vue指令

指令：是带有v-前缀的特殊属性，通过属性来操作元素。声明式指令

v-bind

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <span v-bind:title="message">小姐姐，进来看看呀</span>
    </div>


    <script>
        var app = new Vue({
            el: '#app',
            data:{
                message:'想你: ' + new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>

鼠标悬停

缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

条件渲染：v-if、v-show

显示与隐藏、列表

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--&lt;!&ndash; http-equiv与content属性是固定的 用ie的最高版本渲染 &ndash;&gt;-->
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <!--&lt;!&ndash;  seo  搜索引擎  &ndash;&gt;-->
    <!--<title>Title</title>-->
    <!--<script src="vue.js"></script>-->
<!--</head>-->
<!--<body>-->
    <!--<div id="app">-->
        <!--&lt;!&ndash; 数据绑定 &ndash;&gt;-->
        <!--{{ message }}-->
    <!--</div>-->

    <!--<script>-->
        <!--//  创建了一个vue对象-->
        <!--var app = new Vue({-->
            <!--el: '#app', //找标签 表示当前这个元素开始使用vue-->
            <!--data: {-->
                <!--// 数据属性-->
                <!--message: 'hello vue'-->
            <!--}-->
        <!--})-->
    <!--</script>-->
<!--</body>-->
<!--</html>-->




<!--  v-if v-show -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- http-equiv与content属性是固定的 用ie的最高版本渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--  seo  搜索引擎  -->
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-if = 'see'>hello</p>
    </div>

    <!--  v-for 渲染一个列表 -->
    <div id="app2">
        <ul>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ul>
    </div>
    
    <script>
        //  创建了一个vue对象
        var app = new Vue({
            el: '#app', //找标签 表示当前这个元素开始使用vue
            data: {
                // 数据属性
                see:true    // 显示
//                see:false // 隐藏
            }

        });
        var app2 = new Vue({
           el: '#app2',
           data:{
               todos:[
                   { text:'学习 Python'},
                   { text: '学习Vue' },
                   { text: '学习使我快乐' }
               ]
           }
        })
    </script>
</body>
</html>

View Code

都可以控制切换状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box" v-if = "isShow">我的第一个盒子</div>
        <!-- on能绑定所有的事件  调用-->
        <button @click = "showHandler()">{{text}}</button>

        <div class="box2" v-show = 'show'>第二个盒子</div>
        <button @click = "showHandler2()">{{text}}</button>
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                isShow: true,
                text:"隐藏",
                show:false
            },
            methods:{
                // 显示与隐藏 并修改text
               showHandler(){       // 对象的单体模式  声明
                   if (this.isShow) {
                       this.isShow = false;
                       this.text = "显示";
                   }else {
                       this.isShow = true;
                       this.text = "隐藏";
                   }
               }
            }
            })
    </script>
</body>
</html>

v-if与v-show差别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if 与 v-for 一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

v-on

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

颜色切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
        }
        .box2{

            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box" :class="{box2:isBox2}"></div>
        <input type="button" value="切换" @click = 'box2Handler()'>
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                isShow: true,
                text:"隐藏",
                show:false,
                isBox2:false,
            },
            methods:{
                // 显示与隐藏 并修改text
                box2Handler(){
                    this.isBox2 =! this.isBox2
                }
            }
            })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
        }
        .box2{

            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box" :class="{box2:isBox2}"></div>
        <input type="button" value="切换" @click = 'box2Handler()'>
        <!--绑定网址-->
        <a :href="url">我想上天</a>
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                isShow: true,
                text:"隐藏",
                show:false,
                isBox2:false,
                url:"http://www.cnblogs.com/jassin-du/",
            },
            methods:{
                // 显示与隐藏 并修改text
                box2Handler(){
                    this.isBox2 =! this.isBox2
                }
            }
            })
    </script>
</body>

给a标签绑定url

计算属性与侦听器

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

。模板即为{{ }}

#  如下面逻辑
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

计算属性

计算属性默认是getter（只能去获取东西）作用：实时监听我们的数据变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <!--1：先圈一块地-->
    <div id="computed">
        <h2>{{message}}</h2>
        <h4>{{getMessage}}</h4>
        <button @click="clickBtn()">你好,明天</button>
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var com = new Vue({
            el:'#computed',　　// 声明我要对某标签进行操作
            data:{    // 数据属性
                 message:"hello world"
            },

            // 2：接将三个方法写上
            methods:{   // 方法
                clickBtn(){
                    this.message = 'hello tomorrow'
                }
            },
            computed:{  // 计算属性默认只有getter 实时监听数据变化
                getMessage(){
                    return this.message
                }
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <!--1：先圈一块地-->
    <div id="computed">
        <h2>{{message}}</h2>
        <h4>{{getMessage}}</h4>
        <h3>{{reversedMessage}}</h3>
        <button @click="clickBtn()">你好,明天</button>
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var com = new Vue({
            el:'#computed',
            data:{    // 数据属性
                 message:"hello world"
            },

            // 2：接将三个方法写上
            methods:{   // 方法
                clickBtn(){
                    this.message = 'hello tomorrow'
                }
            },
            computed:{  // 计算属性默认只有getter 实时监听数据变化

                reversedMessage: function () {  // 反转属性
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

反转属性reversedMessage

getter 的方法有两种写法

                // 简便写法
//                getMessage(){
//                    return this.message
//                }
                // setter方法 :这里的getter方法效果与上面相同
                getMessage:{
                    get:function () {
                        return this.message
                    },

计算属性的 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <!--1：先圈一块地-->
    <div id="computed">
        <h2>{{message}}</h2>
        <h4>{{getMessage}}</h4>
        <h3>{{reversedMessage}}</h3>
        <button @click="clickBtn()">你好,明天</button>
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var com = new Vue({
            el:'#computed',
            data:{    // 数据属性
                 message:"hello world"
            },

            // 2：接将三个方法写上
            methods:{   // 方法
                clickBtn(){
                    //  this.message = 'hello tomorrow'

                    // get  只调用到get方法
                    console.log(this.getMessage);

                    // set  设置值
                    this.getMessage = 'hello tomorrow'
                }
            },
            computed:{  // 计算属性默认只有getter 实时监听数据变化
                // 简便写法
//                getMessage(){
//                    return this.message
//                }
                // setter方法 :这里的getter方法效果与上面相同
                getMessage:{
                    get:function () {
                        return this.message
                    },
                    set:function (newVal) {
                        this.message = newVal;
                    }
                }
            }
        })
    </script>
</body>
</html>