Vue基础知识

xiaoxiao2025-04-14 38

Vue

Vue是基于MVVM模式实现的一套js框架（函数库），Vue.js的目标是尽可能简单实现响应的数据绑定和组合的试图组件小知识： 1.{{两个大括号之间不能有空格 2.vue的代码一般写在要控制的标签下面

1.基本用法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> //引入Vue.js <script src="./js/vue.js"></script> </head> <body>  <div id='app'>{{str}}</div> <script> var vm = new Vue({ // Vue要控制的标签 el: '#app', // Vue要绑定的数据 data: { str: 'hello ' } }) </script> </body> </html>

2.指令

常用指令 v-bind:设置元素的class属性或者sytle属性 v-on:监听 DOM 事件，并在触发时运行一些 JavaScript 代码 v-if:可以控制元素的创建或者销毁 v-else:表示 v-if 的“else 块” v-else-if:v-if 的“else-if 块” v-show:显示和隐藏元素样式，元素一直是存在的 v-for:将一组数据渲染到页面中 v-model：在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

3.Vue控制html内容

<body> <div id="app">  <div>{{ str }}</div>  <p>{{ str.split('').reverse().join('') }}</p> <span>{{ num+1 }}</span>  <div>{{ bool?'成立':'不成立' }}</div>  <a v-bind:href="url">链接文字</a>  <a :href="url2">淘宝</a> </div> <script> var vm = new Vue({ el: '#app', data: { str: 'abcdefg', num: 0, bool: false, url:'https://www.baidu.com', url2: 'http://www.taobao.com' } } ) </script> </body>

4.设置元素的class属性

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

<div id="app">   <div :class="{'myclass1': bool1, 'myclass2': bool2}">11111111111</div>  <div :class="myobject">2222222</div>  <div :class="[mynames1, mynames2]">33333333333</div> <div :class="[bool2?'abc':'jqk']">44444444</div> </div> <script> var vm = new Vue({ el: '#app', data: { bool1: true, bool2: false, myobject: { class1: true, class2: false }, mynames1: 'aaa', mynames2: 'bbb' } }) </script>

5.设置sytle属性

<div id="app">  <div :style="{color:mycolor, fontSize:myfontSize}">11111111111</div> <div :style="myobject1">222222</div> <div :style="[myobject1, myobject2]">3333</div> </div> <script> var vm = new Vue({ el: '#app', data: { mycolor: 'red', myfontSize: '60px', myobject1: { color: 'blue', fontSize: '100px' }, myobject2: { background: '#ccc' } } }) </script>

6. 事件处理

事件绑定

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，事件的处理，简单的逻辑可以写在指令中，复杂的需要在vue对象的methods属性中指定处理函数。

<div id="example-1">  <button v-on:click="counter += 1">Add 1</button> <p> {{ counter }}</p> </div> <script> var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) </script>

methods属性中指定处理函数：

<div id="example-2">  <button v-on:click="greet">Greet</button> </div> <script> var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function () { // `this` 在方法里指向当前 Vue 实例 alert('Hello ' + this.name + '!') } } }) </script>

最新回复(0)