Vue总结（1），赶快看过来

最新推荐文章于 2024-09-27 15:27:45 发布

我是秃头兔

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量82

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/y1304908038/article/details/121088752

版权

vue是什么？

Vue.js的定位是一个渐进式框架前端三大mvvm框架 vue , react ,angular

如今Vue.js受到越来越多关注的一个重要原因：你只需要具备基本的HTML/JavaScript/CSS 基础，就可以快速上手

下面就让我为你介绍vue的基本概念

1.引入vue.js库

<script src="vue.js"></script>

2. 创建vue实例

<script>

new Vue({

el：'#app',

data: {msg:'Hello,Vue.js 2'}

})

</script>

3. 完整html导入

<div id="app">

hello Vue!

</div>

4.完整的helloWorld代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<script type="text/javascript" src="../assets/js/vue.js"></script>

<title>Helloworld</title>

</head>

<body>

<h1>Hello World</h1>

<hr>

<div id="app">

{{message}}

</div>

<script type="text/javascript">

var app=new Vue({

el:'#app',

data:{

message:'hello Vue!'

}

})

</script>

</body>

</html>

做出来这些，那么恭喜你，你已经跨上了vue的一个台阶！

模板语法-文本语法

文本

数据绑定最常见的形式就是使用{{}}语法 (双大括号)

<span> {{message}}</span>

也可以使用v-text方法

<span v-text="message"></span>

html文本

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

<div id="app">

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

</div>

<script type="text/javascript">

var app=new Vue({

el:'#app',

data:{

message:'hello Vue!',

rawMsg:'<h1>你好vue</h1>'

}

})

</script>

模板语法-属性

给html标签绑定一个属性值应该使用 v-bind:属性名称

v-bind:属性=“指令值”
:属性=“值”

实例化参数

el:"#app" 选择目标标签
data:{} 指定数据
data(){return{}} 一个函数返回一个对象
methods:{a(){}} 定义事件

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">

{{ msg.split('').reverse().join('') }}

</div>

，这里是想要显示变量 msg 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

当你需要从现有数组得到新的数据这个时候你就需要计算了computed

<div id="example">

<p>原来的信息: "{{ msg }}"</p>

<p>计算翻转的信息: "{{ rmsg }}"</p>

</div>

var vm = new Vue({

el: '#example',

data: {

msg: 'Hello'

},

computed: {

// 计算属性的 getter

rmsg: function () {

// `this` 指向 vm 实例

return this.msg.split('').reverse().join('')

}

})

对象变化监听

我们需要监听对象的属性值是否发生改变用

<div id="app">

<p>计数器: {{ num }}</p>

<button @click="num.age++">点我</button>

</div>

<script>

var vm = new Vue({

el: '#app',

data: {

num: {age:1}

},

watch:{

'num':{

handler:function(nval, oval) {

console.log('num变化 :' + oval.age + ' 变为 ' + nval.age + '!')

},

deep:true

}

});

</script>

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点

<div id="app">

<p>页面载入时，input 元素自动获取焦点：</p>

<input v-focus="">

</div>

<script>

// 创建根实例

new Vue({

el: '#app',

directives: {

// 注册一个局部的自定义指令 v-focus

focus: {

// 指令的定义

inserted: function (el) {

// 聚焦元素

el.focus()

}

})

</script>

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新