vue基础1-基本语法 

vue是在js基础上进行了优化；vue已经将操作页面的方法都封装好，我们只需要对数据进行修改就可以完成页面的显示。vue的核心思想是只要改变数据，页面就发生变化

基本语法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--模板语言,两个大括号，展示data中msg数据-->
        {{msg}}
    </div>
    <script src="vue.js"></script>   <!--引用js-->
    <script>
        //最基础实例用法
        var vm=new Vue({
            //通过一个元素获取到要操作的div,然后再div下进行一系列的操作
            el:'#app',
                //数据源
            data:{
                msg:'hello'
            },
            //方法,多个方法之间用,分开
            methods:{
                change(){}
            }
        })
    </script>
</body>
</html>

　　

 

　绑定事件

<body>
    <div id="app">
        <span>{{msg}}</span>
        <input type="button" @click="change" value="修改">  
    //使用@click绑定事件，当数据值发生变更后，将其产生的影响
    </div>
    <script src="vue.js"></script>   <!--引用js-->
    <script>
        //最基础实例用法
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
            methods:{
                change(){
                    this.msg='msg修改'
                }
            }
        })
    </script>
</body>

　　绑定属性

<a href="{{url}}">跳转到百度地址</a>
// 完整写法
<a v-bind:href="url">跳转到百度地址</a>
// 缩写
<a :href="url">跳转到百度地址</a>

　三元运算

    <div id="app">
        <div>{{flag?'男生':'女生'}}</div>   <!--三元运算，如果为true显示男生，false为女生-->
        <input type="button" @click="change" value="修改">
    </div>

　

v-if、v-else-if、v-else（条件渲染）

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true 值的时候被渲染

<span v-if="phoneNumber==10086">
    中国移动
</span>
<span v-else-if="phoneNumber==10010">
    中国联通
</span>
<span v-else>
    中国电信
</span>

 

v-show（条件渲染）

根据条件渲染的另一种写法，它独立自己使用，和v-if的使用相同，区别在于v-if条件不成立，元素不会被创建，而v-show条件不成立只是增加了一个display:none的属性。

<span v-show="number==10086">
    移动
</span>

　　v-for

   <div id="app">
         <div v-for="(item,index) in games">{{item}}-{{index}}</div>   <!--循环列表-->
         <div v-for="(item,key) in dict_games">{{item}}-{{key}}</div>  <!--循环字典-->
    </div>
     <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                games:['绝地求生', '英雄联盟', '王者荣耀'],
                dict_games:{'name':'绝地求生', 'company':'蓝洞'}
            }
        })
    </script>

　　

双向数据绑定

 

 

 

　　

　　

　

　



posted @ 2019-12-09 18:31  哈哈一笑~~~  阅读(194)  评论(0)  编辑  收藏  举报