【Vue学习】基础语法(一)

橙点点

已于 2022-04-28 14:52:10 修改

阅读量126

点赞数

分类专栏： vue学习文章标签：前端 vue.js vue

于 2022-04-28 14:48:44 首次发布

本文链接：https://blog.csdn.net/qq_44976861/article/details/124471892

版权

vue学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

基础语法(一)

一.Vue初体验

模板template:

	<div id="app">
        <h2>{{message}}</h2>     
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message : '你好啊',
            }
        })
    </script>

1.第一课(vue.js新方式)

编程范式中属于声明式编程
方便做到数据和界面分离,只需要更改data里面的数据即可改变全部要更改的数据
当数据作出改变,界面会发生相应反应(响应式)

    <body>

    <!-- id为app的加双括号则可以打印msg的值,而下面这个只能显示{{msg}} -->
    <div>{{msg}}</div>
    <div id="app">
        {{msg}}
        <ul>  
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
    

    <script src="./js/vue.js"></script>
    <!-- 引入vue.js -->
    <script>
        //let(变量) const(常量)
        //编程范式中属于声明式编程
        const app = new Vue({ //创建一个Vue对象
            el: '#app',//用于要挂载要管理的程序
            data: {//定义数据
                msg : '你好啊,小傻瓜',
                movies : ['星际穿越','大话西游','少年派']
            }
        })
    </script>
</body>

通过app.movies.push(‘你好李焕英’) 就可以给数组添加元素,并返回新数组长度

2.而以前元素js的做法,在编程范式中属于命令式编程

步骤如下:
    1.创建div元素,设置id属性
    2.定义一个变量叫msg
    3.将msg变量放在前面的div元素中显示

3.计数器案例

    <div id="app">
        <h2>当前计数: {{counter}}</h2>
        <!--  <button v-on:click="counter++">+</button> -->
        <!-- <button v-on:click="counter--">-</button> --> 
        <button v-on:click="add">+</button>
        <button @click="sub">-</button>

    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data : {
                counter : 0
            },
            methods : {//定义方法
                add: function(){
                    console.log('add被执行');
                    this.counter++;//用this指向当前对象
                },
                sub: function(){
                    console.log('sub被执行');
                    this.counter--;
                }
            }
        })
    </script>

4.MVVM

MVVM 是vue实现 数据驱动视图 和 双向数据绑定的核心原理,指的是Model,View和ViewModel.
它把每个html页面都拆分成了三部分,Model表示当前页面渲染时所依赖的数据源;View表示当前页面所渲染的DOM结构(视图);而ViewModel表示vue的实例,是MVVM的核心,是它把当前页面的数据源和页面结构连接在一起.

5.插值操作其它指令

v-once 后面无需跟表达式,表示元素和组件只渲染一次,不随着数据的改变而改变.
v-html 后面往往会跟上一个string类型,将string的html解析出来并渲染.
v-pre 跳过这个元素和它子元素的编译过程,直接显示原本的语法
v-cloak 用于隐藏浏览器可能会直接显示出为编译的Mustache语法

6. v-bind 动态绑定属性

语法糖(简写): :
动态绑定class
- 动态绑定class(对象语法):
  1. 直接通过{}绑定一个类,如 class=“{‘active’: isActive}”
  2. 也可以通过判断,传入多个值,如 :class=“{‘active’: isActive, ‘line’:isLine}”
  3. 还可以和普通的类同时存在,并不冲突,如 class=“title” :class=“{‘active’': isActive, ‘line’:isLine}” 如果此时isActive和isLine都为true,那么此时三个类都存在
  4. 如果过于复杂,可以放在一个methods或者computed中,如class=“title” :class="classes"这里的classes是一个计算属性
```
 <h2 v-bind:class="active:true,line:false">
      
     {{message}}
 </h2>
```
- 动态绑定class(数组语法)
  1. class=“title” :class=“[active,line]” 此时的active和line是变量
  2. class=“title” :class=“getClasses()”

    <div id="app">
        <!-- 动态绑定class数组属性 -->
        <!-- 下面两个显示内容一样 -->
        <h2 class="title"  :class="[active,line]">{{message}}</h2>
        <h2 class="title"  :class="getClasses()">{{message}}</h2>
        
    </div>
   
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message : '你好啊',
                active : 'aaaaa',
                line : 'bbbbbb'
            },
            methods: {
                getClasses: function(){
                    return [this.active,this.line]
                }
            }
        })
    </script>

动态绑定style css内联样式
```
  <h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>
```
- 动态绑定style(对象语法)
  1. 静态对象绑定(此时属性值’50px’的单引号不能省略,否则会当做一个变量去解析)

<h2 :style="{fontSize: '50px'}">{{message}}</h2>

动态对象绑定(将finalSize当成一个变量使用)
```
此时data中有键值对  finalSize: '100px'
```

<h2 :style="{fontSize:  finalSize}">{{message}}</h2>

	此时data中有键值对 finalSize: 100

<h2 :style="{fontSize:  finalSize + 'px'}">{{message}}</h2>

	如果style中键值对过长,可在vue对象中的methods内封装成一个函数

<body>
    <div id="app">
        <h2 :style="{fontSize: finalSize + 'px',backgrongColor: finalColor}">{{message}}</h2>     
        <h2 :style="getStyles()">{{message}}</h2>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message : '你好啊',
                finalSize : 100,
                finalColor : 'red',
            },
            methods:{
                getStyles: function(){
                    return {fontSize: this.finalSize + 'px', backgrongColor: this.finalColor}
                }
            }
        })
    </script>
</body>

动态绑定style(数组语法)

<body>
    <div id="app">
        <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
    </div>
   
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message : '你好啊',
                baseStyle: {backgrondColor: 'red'},
                baseStyle1: {fontSize: '100px'},
            },
        })
    </script>
</body>