vue.js渐进式框架使用详解
这次给大家带来vue.js渐进式框架使用详解，vue.js渐进式框架使用详解的注意事项有哪些，下面就是实战案例，一起来看一下。
Vue.js是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是，Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供有力驱动。
Vue.js目前已经更新到2.x，功能和语法上有一定升级和修改，本文首先介绍基础内容。
1、新手指南
vue的使用非常简单，下载vue.js或vue.min.js直接导入即可使用。
2、vue初步入门
2.1声明式渲染
Vue.js 的核心是，可以采用简洁的模板语法来声明式的将数据渲染为 DOM：
<p id="app">
{{ message }}
</p>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})这样就会输入：Hello Vue！
我们已经生成了第一个 Vue 应用程序！这看起来和渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被关联在一起，所有的数据和 DOM 都是响应式的。我们如何对这一切清晰领会？只需打开你的浏览器的 JavaScript 控制台（现在，就在当前页面打开），然后设置 app.message 的值，你将看到上面的示例所渲染的 DOM 元素会相应地更新。
除了文本插值(text interpolation)，我们还可以采用这样的方式绑定 DOM 元素属性：
<p id="app-2">
<span v-bind:title="message">
鼠标悬停此处几秒，
可以看到此处动态绑定的 title！
</span>
</p>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString() }
})鼠标悬停几秒后，就可以看到动态的提示。
这里我们遇到一些新内容。你看到的 v-bind 属性被称为指令。指令带有前缀 v-，表示是由 Vue 提供的专用属性。可能你已经猜到了，它们会在渲染的 DOM 上产生专门的响应式行为。简而言之，这里该指令的作用就是：“将此元素的title 属性与 Vue 实例的 message 属性保持关联更新”。
如果你再次打开浏览器的 JavaScript 控制台，并输入 app2.message = '一些新的 message'，就会再次看到，绑定了title 属性的 HTML 已经进行了更新。
2.1条件与循环
控制切换一个元素的显示也相当简单：
<p id="app-3">
<p v-if="seen">现在你可以看到我</p>
</p>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})继续在控制台输入 app3.seen = false，你应该会看到 span 消失。
这个示例表明，我们不只是可以将数据绑定到文本和属性，也可以将数据绑定到 DOM 结构。而且，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/删除元素时，自动使用过渡效果。
还有其它一些指令，每个都具有各自不同的特殊功能。例如，v-for 指令，可以使用数组中的数据来展示一个项目列表：
<p id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</p>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '创建激动人心的代码' }
]
}
})3 、vue实例
每个 Vue 应用程序都是通过 Vue 函数创建出一个新的 Vue 实例开始的：
var vm = new Vue({
// 选项
})尽管没有完全遵循 MVVM 模式，但是 Vue 的设计仍然受到了它的启发。作为约定，通常我们使用变量 vm (ViewModel 的简称) 来表示 Vue 实例。
3.1data 和 methods
在创建 Vue 实例时，会将所有在 data 对象中找到的属性，都添加到 Vue 的响应式系统中。每当这些属性的值发生变化时，视图都会“及时响应”，并更新相应的新值。
// data 对象
var data = { a: 1 }
// 此对象将会添加到 Vue 实例上
var vm = new Vue({
data: data
})
// 这里引用了同一个对象！
vm.a === data.a // => true
// 设置实例上的属性，
// 也会影响原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3每当 data 对象发生变化，都会触发视图重新渲染。值得注意的是，如果实例已经创建，那么只有那些 data 中的原本就已经存在的属性，才是响应式的。也就是说，如果在实例创建之后，添加一个新的属性，例如：
vm.b = 'hi'
然后，修改 b 不会触发任何视图更新。如果你已经提前知道，之后将会用到一个开始是空的或不存在的属性，你就需要预先设置一些初始值。例如：
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}除了 data 属性， Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具有前缀 $，以便与用户定义(user-defined)的属性有所区分。例如：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 此回调函数将在 `vm.a` 改变后调用
})3.2vue实例的声明周期
vue实例的声明周期是一个很重要的概念，理解之后可以通过它实现很多功能。
看下这段代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="container">我的声明周期，大家看吧！</p>
</body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
//以下代码时显示vm整个生命周期的流程
var vm = new Vue({
el: "#container",
data: {
test : 'hello world'
},
beforeCreate: function(){
console.log(this);
showData('创建vue实例前',this);
},
created: function(){
showData('创建vue实例后',this);
},
beforeMount:function(){
showData('挂载到dom前',this);
},
mounted: function(){
showData('挂载到dom后',this);
},
beforeUpdate:function(){
showData('数据变化更新前',this);
},
updated:function(){
showData('数据变化更新后',this);
},
beforeDestroy:function(){
vm.test ="3333";
showData('vue实例销毁前',this);
},
destroyed:function(){
showData('vue实例销毁后',this);
}
});
function realDom(){
console.log('真实dom结构：' + document.getElementById('container').innerHTML);
}
function showData(process,obj){
console.log(process);
console.log('data 数据：' + obj.test)
console.log('挂载的对象：')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
</script>
</html>通过控制台的打印效果可以看出来，实例化 vue 对象大致分为 创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段，，注意每个阶段都有对应的钩子，我们可以通过对这些钩子进行操作，达成一些功能。虽然初学者用不太上，但是提前了解一下还是好的，到时候碰到实际功能要能想得到生命周期的钩子。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci vue.js渐进式框架使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Kuasai konsep utama Spring MVC: Fahami ciri penting ini
Dec 29, 2023 am 09:14 AM
Fahami ciri utama SpringMVC: Untuk menguasai konsep penting ini, contoh kod khusus diperlukan SpringMVC ialah rangka kerja pembangunan aplikasi web berasaskan Java yang membantu pembangun membina struktur yang fleksibel dan berskala melalui corak seni bina Model-View-Controller (MVC). aplikasi web. Memahami dan menguasai ciri utama SpringMVC akan membolehkan kami membangun dan mengurus aplikasi web kami dengan lebih cekap. Artikel ini akan memperkenalkan beberapa konsep penting SpringMVC
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Pilih versi Go yang berkenaan, berdasarkan keperluan dan ciri
Jan 20, 2024 am 09:28 AM
Dengan perkembangan pesat Internet, bahasa pengaturcaraan sentiasa berkembang dan dikemas kini. Antaranya, bahasa Go, sebagai bahasa pengaturcaraan sumber terbuka, telah menarik banyak perhatian sejak beberapa tahun kebelakangan ini. Bahasa Go direka untuk menjadi mudah, cekap, selamat dan mudah dibangunkan dan digunakan. Ia mempunyai ciri-ciri konkurensi tinggi, penyusunan pantas dan keselamatan memori, menjadikannya digunakan secara meluas dalam bidang seperti pembangunan web, pengkomputeran awan dan data besar. Walau bagaimanapun, pada masa ini terdapat versi berbeza bahasa Go yang tersedia. Apabila memilih versi bahasa Go yang sesuai, kita perlu mempertimbangkan kedua-dua keperluan dan ciri. kepala
Adakah terdapat ciri berorientasikan objek seperti kelas di Golang?
Mar 19, 2024 pm 02:51 PM
Tiada konsep kelas dalam erti kata tradisional dalam Golang (bahasa Go), tetapi ia menyediakan jenis data yang dipanggil struktur, yang melaluinya ciri berorientasikan objek yang serupa dengan kelas boleh dicapai. Dalam artikel ini, kami akan menerangkan cara menggunakan struktur untuk melaksanakan ciri berorientasikan objek dan menyediakan contoh kod konkrit. Definisi dan penggunaan struktur Pertama, mari kita lihat definisi dan penggunaan struktur. Di Golang, struktur boleh ditakrifkan melalui kata kunci jenis dan kemudian digunakan di mana perlu. Struktur boleh mengandungi atribut
Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah
Jan 05, 2024 pm 01:37 PM
Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut
Jenis dan ciri fungsi C++
Apr 11, 2024 pm 03:30 PM
Fungsi C++ mempunyai jenis berikut: fungsi ringkas, fungsi const, fungsi statik dan fungsi maya termasuk: fungsi sebaris, parameter lalai, pulangan rujukan dan fungsi terlampau beban; Sebagai contoh, fungsi calculateArea menggunakan π untuk mengira luas bulatan jejari tertentu dan mengembalikannya sebagai output.
Adakah vue.js sukar belajar?
Apr 04, 2025 am 12:02 AM
Vue.js tidak sukar untuk dipelajari, terutamanya bagi pemaju dengan asas JavaScript. 1) Reka bentuk progresif dan sistem responsif memudahkan proses pembangunan. 2) Pembangunan berasaskan komponen menjadikan pengurusan kod lebih cekap. 3) Contoh penggunaan menunjukkan penggunaan asas dan lanjutan. 4) Kesilapan biasa boleh disahpepijat melalui Vuedevtools. 5) Pengoptimuman prestasi dan amalan terbaik, seperti menggunakan V-IF/V-Show dan atribut utama, boleh meningkatkan kecekapan aplikasi.
Adakah Vue digunakan untuk frontend atau backend?
Apr 03, 2025 am 12:07 AM
Vue.js terutamanya digunakan untuk pembangunan front-end. 1) Ia adalah rangka kerja JavaScript yang ringan dan fleksibel yang difokuskan pada membina antara muka pengguna dan aplikasi satu halaman. 2) Inti Vue.js adalah sistem data responsifnya, dan pandangannya dikemas kini secara automatik apabila data berubah. 3) Ia menyokong pembangunan komponen, dan UI boleh dibahagikan kepada komponen bebas dan boleh diguna semula.
