vue

7个属性

  • el属性

    • 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。



  • data属性

    • 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。


  • template属性

    • 用来设置模板，会替换页面元素，包括占位符。

  • methods属性

    • 放置页面中的业务逻辑，js方法一般都放置在methods中

  • render属性

    • 创建真正的Virtual Dom

  • computed属性

    • 用来计算

  • watch属性

    • watch:function(new,old){}

    • 监听data中数据的变化

    • 两个参数，一个返回新值，一个返回旧值， 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: "hello vue!"
        }
    })
</script>
</body>
</html>

在线cdn    https://cn.vuejs.org/v2/guide/installation.html

vue实现实时同步数据,不需要刷新,后台数据可以模拟,例如这里的data




v-bind 绑定属性 

v-bind:title="message"  可以简写  :title="message"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <span v-bind:title="message">悬浮试试</span>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: "hello vue!"
        }
    })
</script>
</body>
</html>

a标签url绑定




判断

  • v-if

  • v-if-else

  • v-else

  • v-show

动态修改display等等


性能决定选择




小案例 tab页切换

v-if

v-show


循环 

v-for="item in items"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <li v-for="item in items">{{item.msg}}</li>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // [] 数组  {}对象
            items: [
                {msg: 'vis.yang'},
                {msg: 'robot'}
            ]
        }
    })
</script>
</body>
</html>

绑定事件 


// 方法必须定义在methods对象中     v-on:click="sayHi"  可简写成@click="sayHi"  



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '执行了sayHi'
        },
        methods: {
            // 方法必须定义在methods对象中
                       //可简写 sayHi(){
                                  alert(this.msg)
                             }

            sayHi: function () {
                alert(this.msg);
            }

        }
    });
</script>
</body>
</html>

带参写法  

// $event 防止丢失原有的event

事件修饰符 



示例,阻止跳转

阻止事件冒泡,叠层事件


双向绑定    v-model  动态操作表单标签的值


<input type="text" v-model="message"/> {{message}}   原始 v-model:value="message"  简写 v-model="message"


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="radio" name="sex" value="man" v-model="sex">男
    <input type="radio" name="sex" value="woman" v-model="sex">女
    选择的性别:{{sex}}
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            sex: ''
        },
    });
</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>    
</head>
<body>
<div id="app">
    <select name="" id="" v-model="selected">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    value:{{selected}}
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            selected: ''
        },
    });
</script>
</body>
</html>




数据代理

代理数据不参与遍历


代理原理

数据代理

getter setter 操作数据 界面主动刷新 


{{ _data.name }}       数据代理后简写成{{ name }}

事件修饰符

连用


键盘事件


计算属性

插值语法写姓名案例  若firstName方法多起来就不易于阅读了

methods语法写姓名案例   方***被重复调用,模板重新解析,效率不高


计算属性实现姓名案例







计算属性简写  条件:只读不改可简写


计算属性的天气案例 

<!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.0">
    <title>Vue学习</title>

</head>

<body>
    
    <div id="app">
        <h2>hello {{name}}</h2>
        <!-- <h1>今天天气很{{isHot?'炎热':'凉爽'}}</h1> -->
        <!-- 利用计算属性,减少模板里的判断 -->
        <h1>今天天气很{{info}}</h1>
        <!-- <button v-on:click="change">切换天气</button> -->
        <button @click="change">切换天气</button>
    </div>




    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                name: "Vis.Yang",
                isHot: 'true',
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽';
                }
            },
            methods: {
                change() {
                                        //取反赋值回
                    this.isHot = !this.isHot;
                }
            },

        })

    </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.0">
    <title>Vue学习</title>

</head>

<body>

    <div id="app">
        <h2>hello {{name}}</h2>
        <!-- <h1>今天天气很{{isHot?'炎热':'凉爽'}}</h1> -->
        <!-- 利用计算属性,减少模板里的判断 -->
        <h1>今天天气很{{info}}</h1>
        <!-- <button v-on:click="change">切换天气</button> -->
        <button @click="change">切换天气</button>
        <h2>点击了{{number.a}}下</h2>
        <button @click="number.a++">点击次数+1</button>
        <h2>点击了{{number.b}}下</h2>
        <button @click="number.b++">点击次数+1</button>
        <h2></h2>
    </div>




    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        //关闭生产提示
        Vue.config.productionTip = false;
        // 实例化Vue
        const vm = new Vue({
            el: "#app",
            data: {
                name: "Vis.Yang",
                isHot: 'true',
                number: {
                    a: 1,
                    b: 1,
                }
            },
            //计算
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽';
                }
            },
            // 方法
            methods: {
                change() {
                    this.isHot = !this.isHot;
                }
            },
            // 监视
            watch: {
                //检测isHot
                isHot: {
                    // immediate: true,//初始化时让handler调用一下
                    handler(newValue, oldValue) {
                        console.log("isHot被修改了" + "新值:" + newValue + "旧值" + oldValue);
                    }
                },
                //监视多级结构中某个属性的变化
                // key:value中key其实时字符串类型
                // 'number.a': {
                //     handler() {
                //         console.log('a的值改变了');
                //     }
                // },

                //监视number中的所有的属性 deep: true
                'number': {
                    deep: true,//开启深度监视
                    handler() {
                        console.log('有值改变');
                    }
                },
            },
        })

    </script>
</body>

</html>


vue组件

自定义标签 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script src="../js/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">

<my-component></my-component>

</div>


<script>
    Vue.component("my-component",{
       template:'<li>vis.yang</li>'
    });
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'vis.yang',
            age: '18',
        },
    });
</script>
</body>
</html>
命名注意  my-component  可以  myComponent 不可以  mycomponent可以但不规范
<my-component v-for="item in items" v-bind:value="item"></my-component>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script src="../js/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
       //v-bind:value="item"  绑定 items 数组中遍历出来的值item,即每一项
    <my-component v-for="item in items" v-bind:value="item"></my-component>

</div>


<script>
    // 定义component组件
    Vue.component("my-component", {
               //props 将Vue的数据推送给template
        props: ['value'],
        template: '<li>{{value}}</li>'
    });
    var vm = new Vue({
        el: '#app',
        data: {
            items: ["java", "javafx", "vue"]
        }
    });
</script>
</body>
</html>