Vue.js入门文档

随笔记录：

1. 导入vue.js文件

也可以地址引用，地址: https://cdn.jsdelivr.net/npm/vue/dist/vue.js
2.测试Vue对DOM的操作

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

</div>

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}

});

PS：通过Vue，对DOM进行操作，除了可以进行数据传递，还有对应的for循环以及if判断，可以对数组列表等数据进行循环输出。

3. 事件

<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>

</div>

var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}

});

PS：Vue通过自己的属性标签进行事件操作，同时也可以进行逻辑判断，循环操作。在Vue实例里，也可以调用JS函数等其他函数等。

4.for循环和点击事件+小函数

<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>


<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>

</div>

var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
});
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}

});

5.Vue组件树

PS：Vue强大的功能，告别以往HTML CSS 与JS混乱不堪的情况，对页面组件进行高度解耦，实现页面组件的高度复用，主要分为全局组件以及局部组件，组件之间以单根继承形式生成组件树。

// 声明全局组件

Vue.component('todo-item', {

props: ['todo'],
template: '<li>{{ todo.text }}</li>'

})

// 调用

</ul>

PS：虽然Vue可以让我们以标签的方式对全局组件进行调用，但必须是在Vue里，否则是无效的。所以还需要进行实例化。

var app8 = new Vue({
el:'#app-8'

})

这样就可以实现效果：

我们也可以通过Vue.component声明多个全局组件进行调用。

Vue.component('todo-item1', {
template: '<li>test1</li>'
})
Vue.component('todo-item2', {
template: '<li>test2</li>'
})

<ul id="app-8">
<todo-item1></todo-item1>
<todo-item2></todo-item2>

</ul>

var app8 = new Vue({
el:'#app-8'

})

效果：

至于new Vue({})内的各种函数就用时间积累吧。

Vue.js入门文档相关推荐

chrome vue.js插件文档_常用web研发技术文档，这里都给你准备好了
研发学习,工作过程中,技术文档是重要的工具之一,但是不少同学使用文档的姿势有点问题,遇到问题就一顿百度,拿着很多不一定对的博客文章翻来翻去还找不到答案,反而浪费了很多时间,我觉得解决日常问题更高效的方 ...
chrome vue.js插件文档_前端开发者必备的40个VSCode插件！
前言:俗话说"君欲善其事,必先利其器."笔者也使用VScode开发有一段时间了,不得不说,VSCode是我目前用到的众多开发工具中最好使用的一款.当然这些功能大多得归功于VSCod ...
chrome vue.js插件文档_神级宝库！GitHub 标星 1.2w+，Chrome 最天秀的插件都在这里啦！...
文章来源:Python空间作者:Rocky0429 作为一个在远古时代用过什么 IE.360.猎豹等浏览器的资深器哥,当我第一次了解 Chrome 的时候,就被它的美貌给吸引住了... 就在我用了一 ...
js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
vue 导出word文档（包括图片）
vue 导出word文档(包括图片) 1.打开终端,安装依赖 -- 安装 docxtemplater npm install docxtemplater pizzip --save-- 安装 jszi ...
[译] 讨论 JS ⚡：文档
原文地址:Let's talk JS ⚡: documentation 原文作者:Arek Nawo 译文出自:掘金翻译计划本文永久链接:github.com/xitu/gold-m- 译者:Sta ...
Android入门文档
该文章为网络材料整理,部分内容经过重新编写. 一. 名词介绍 JDK:Java Development Kit Java 语言的软件开发工具包 JRE:Java Runtime Environment ...
Python3Hovercraft创建impressive.js演示文档（一)
引言想要学习更酷更炫更能吸引人的演示文档吗?想要试试3D类演示效果吗?想要脱离盗版投入开源演示文档项目吗?这一切都在Hovercraft中可以实现. 如果大家了解过prezi,很多人会为它那无限缩放 ...

Vue.js入门文档

Vue.js入门文档相关推荐

最新文章

热门文章