Vue基础部分笔记

最新推荐文章于 2024-04-18 14:45:54 发布

原创最新推荐文章于 2024-04-18 14:45:54 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #JavaScript

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Vue这一基于MVVM模式的js框架，其目标是实现响应的数据绑定和组合视图组件。内容涵盖Vue的基本使用，包括代码书写位置；模板语法，如显示数据、控制属性和绑定事件；还提及使用v-bind指令控制class属性，属性值可为表达式。

Vue

Vue就是基于MVVM模式实现的一套js框架(函数库)，在vue中：Model:指的是js中的数据，如对象，数组等等。View:指的是页面视图

Vue.js 的目标是通过尽可能简单实现响应的数据绑定和组合的视图组件

1.vue的基本使用

提示：
- {{两个大括号之间不能有空格(标准胡子语法)
- vue的代码一般写在要控制的标签下面,写在body中也是可以的,因为他没有入口函数.

<!--引入Vue.js-->
<script src="./js/vue.min.js"></script>

<!-- vue显示数据：从胡子语法开始{{data}} -->
<div id='app'>{{str}}</div>
<script>
    var vm = new Vue({
        
        el: '#app',  // Vue要控制的标签
        
        // Vue要绑定的数据
        data: {
            str: 'hello ' //最终div中显示的数据为 hello
        }
    })
</script>

2、Vue的模板语法

Vue显示数据方法

<body>
    <!-- Vue数据显示方法-->
    <div id="app">
        <div>{{ str }}</div>
        <p>{{ str.split('').reverse().join('') }}</p>
        <span>{{ num+1 }}</span>
        
        <!-- 三元运算符  三元表达式 -->  <!-- 条件?条件成立:条件不成立 -->        
        <div>{{ bool?'成立':'不成立' }}</div>
        
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                str: 'abcdefg',
                num: 0,
                bool: false
            }
        }
        )
    </script>
</body>

Vue控制html属性

<body>
    <!-- 数据显示方法  vue控制html属性  绑定事件和vue封装函数 -->
    <div id="app">
        <!-- v-xx -- 指令：具备特殊功能的语法   -->
        
        <a v-bind:href="url1">百度</a>  <!-- v-bind 完整写法控制html属性 -->
        
        <a :href="url2">淘宝</a>  <!-- : 化简写法控制html属性 -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                str: 'abcdefg',
                num: 0,
                bool: true,
                url1: 'http://www.baidu.com',
                url2: 'http://www.taobao.com'
            }
        })
    </script>
</body>

Vue绑定事件

       <!-- 绑定事件和vue封装函数 -->
       <div id="app">
           <span>{{ num+1 }}</span>
           <br>
           
           <button v-on:click="num += 1">按钮</button>   
           <button @click="num+=1">按钮（化简写法）</button>  <!-- 绑定事件主要写法 @事件类型="要执行的函数"-->
           
           <button @click="fnAdd()">调用函数：num自增</button> <!-- 调用函数的时候，如果没有参数可不写小括号-->
       </div>
       <script>
       var vm = new Vue({
           el:'#app',
           data:{
               num: 0
           },
           methods:{
               // 封装函数
               // 函数名: 匿名函数
               fnAdd:function(){
                   // num 累加1
                   this.num += 1
               }
           }
       })
       </script>

3、Vue控制class属性

使用v-bind指令来设置元素的class属性或者sytle属性，它们的属性值可以是表达式，vue.js在这一块做了增强

    <!-- el  data: 只要数据变，页面视图就变 -->
    <div id="app">
       <!-- class属性:字典  对象   列表 -->


		<!-- 字典:{'类名':布尔值} true添加类 false不添加类 -->
		<div :class="{'myclass1':bool1,'myclass2':bool2}">111</div>
		
		<!-- 对象:key是真实的类名,如果取值true则添加类 -->
		<div :class="myobject">222</div>

		<!-- 列表,将列表中的键锁对应的值添加类 -->
		<div :class="[mynames1,mynames2]"></div>

		<!-- 三元运算符 bool1为true时 为abc  bool1为false时添加fgh -->
		<div :clas="[bool1 ? 'abc' : 'fgh' ]"></div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                bool1: true,
                bool2: false,
                myobject: {
                    class1: true,
                    class2: false
                },
                mynames1: 'aaa',
                mynames2: 'bbb'
            }
        })
    </script>