Vue.js学习笔记（一）

向右看齐 2022-03-26 06:36 240阅读 0赞

1、Vue使用实例

<!DOCTYPE html>

<html>

<head>

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>\{ \{details()\}\}</h1>

</div>

var vm = new Vue(\{

el: '\#vue\_det',

data: \{

site: "菜鸟教程",

url: "www.runoob.com",

alexa: "10000"

\},

methods: \{

details: function() \{

return  this.site + " - 学的不仅是技术，更是梦想！";

\})

</script>

</body>

</html>

①每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

var vm = new Vue(\{

// 选项\})

② Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue\_det，在 div 元素中：

<div id = "vue\_det"></div>

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

③如何定义数据对象

**data** 用于定义属性，实例中有三个属性分别为：site、url、alexa。

**methods** 用于定义的函数，可以通过 return 来返回函数值。

**\{ \{ \}\}** 用于输出对象属性和函数返回值。

<div id="vue\_det">

<h1>\{ \{details()\}\}</h1></div>

2、当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

## **实例** ##

<div id="vue\_det">

<h1>Alexa : \{ \{alexa\}\}</h1>

</div>

// 我们的数据对象

var data = \{ site: "菜鸟教程", url: "www.runoob.com", alexa: 10000\}

var vm = new Vue(\{ el: '\#vue\_det', data: data \})

// 它们引用相同的对象！

document.write(vm.site === data.site) // true

document.write("<br>")

// 设置属性也会影响到原始数据

vm.site = "Runoob"

document.write(data.site + "<br>") // Runoob

// ……反之亦然

data.alexa = 1234

document.write(vm.alexa) // 1234

</script>

3、除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

<div id="vue\_det">

<h1>Alexa : \{ \{alexa\}\}</h1>

</div>

// 我们的数据对象

var data = \{ site: "菜鸟教程", url: "www.runoob.com", alexa: 10000\}

var vm = new Vue(\{

el: '\#vue\_det',

data: data

\})

document.write(vm.$data === data) //true

document.write("<br>") //true

document.write(vm.$el === document.getElementById('vue\_det')) // true

</script>

4、数据绑定

①数据绑定最常见的形式就是使用 \{ \{...\}\}（双大括号）的文本插值

<div id="app"> <p>\{ \{ message \}\}</p> </div>

②使用 v-html 指令用于输出 html 代码：

## **v-html 指令** ##

<div id="app">

<div v-html="message"></div>

</div>

new Vue(\{

el: '\#app',

data: \{ message: '<h1>菜鸟教程</h1>' \}

\})

</script>

③HTML 属性中的值应使用 v-bind 指令。

<div id="app">

<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"> <br><br>

<div v-bind:class="\{'class1': use\}">

v-bind:class 指令

</div>

new Vue(\{

el: '\#app',

data:\{ use: false \} \});

</script>

### **④表达式** ###

Vue.js 都提供了完全的 JavaScript 表达式支持。

## **JavaScript 表达式** ##

<div id="app">

\{ \{5+5\}\}<br>

\{ \{ ok ? 'YES' : 'NO' \}\}<br>

\{ \{ message.split('').reverse().join('') \}\}

div v-bind:id="'list-' + id">菜鸟教程</div>

</div>

new Vue(\{ el: '\#app', data: \{ ok: true, message: 'RUNOOB', id : 1 \} \})

</script>

## **⑤指令** ##

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

# #

## ** v-if 指令  将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。** ##

## **实例** ##

<div id="app">

<p v-if="seen">现在你看到我了</p>

</div>

new Vue(\{ el: '\#app', data: \{ seen: true \} \})

</script>

v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">

在这里参数是监听的事件名。

### **修饰符** ###

修饰符是以半角句号 **.** 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，**.prevent** 修饰符告诉 **v-on** 指令对于触发的事件调用 **event.preventDefault()**：

<form v-on:submit.prevent="onSubmit"></form>

### **6、参数** ###

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

## **实例** ##

<div id="app">

</div>

</script>

**7、v-model 指令来实现双向数据绑定：**

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

## **双向数据绑定** ##

<div id="app">

<p>\{ \{ message \}\}</p>

<input v-model="message">

</div>

new Vue(\{ el: '\#app', data: \{ message: 'Runoob!' \} \})

</script>

**v-model** 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

## **8、字符串反转** ##

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

<!DOCTYPE html>

<html>

<head>

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

</head>

<body>

<p>\{ \{ message \}\}</p>

<button v-on:click="reverseMessage">反转字符串</button>

</div>

new Vue(\{

el: '\#app',

data: \{

message: 'Runoob!'

\},

methods: \{

reverseMessage: function () \{

this.message = this.message.split('').reverse().join('')

\})

</script>

</body>

</html>

## **9、过滤器** ##

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

\{ \{ message | capitalize \}\}

<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写：

\{ \{ message | capitalize \}\}

</div>

new Vue(\{

el: '\#app',

data: \{

message: 'runoob'

\},

filters: \{

capitalize: function (value) \{

if (!value) return ''

value = value.toString()

return value.charAt(0).toUpperCase() + value.slice(1)

\})

</script>

过滤器可以串联：

\{ \{  message | filterA | filterB \}\}

过滤器是 JavaScript 函数，因此可以接受参数：

\{ \{  message | filterA('arg1', arg2) \}\}

这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

## **缩写** ##

### **v-bind 缩写** ###

Vue.js 为两个最为常用的指令提供了特别的缩写：

<a v-bind:href="url"></a><a :href="url"></a>

### **v-on 缩写** ###

<a v-on:click="doSomething"></a><a @click="doSomething"></a>

Vue.js学习笔记（一）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Redis学习笔记一

相关 Redis学习笔记《一》

相关 vuejs初次学习入门

相关 VueJs学习汇总

相关 Python学习笔记（一）

相关 Redis学习笔记(一)

相关 python学习笔记(一)

相关 vuejs学习笔记

相关【Vue 学习】- VueJS 生命周期

相关【Vue 学习】- VueJS 简单入门