Vue学习 Day01
程序员文章站
2023-03-26 20:14:16
[//]: ( Vue学习 Day01) 介绍 这个系列记录自己学习Vue的过程. Vue官方 不推荐 新手直接使用 ,所以前面这几天都是根据 "官方文档" 学习. 步骤 1. 新建一个 文件. 2. 在html中导入vue.js依赖. firstvue 3. 现在就可以照着官方的例子学习了. 例子 ......
介绍
这个系列记录自己学习vue的过程.
vue官方不推荐新手直接使用 vue-cli,所以前面这几天都是根据学习.
步骤
新建一个
html文件.-
在html中导入vue.js依赖.
<head> <meta charset="utf-8"> <title>firstvue</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> --> </head>
现在就可以照着官方的例子学习了.
例子
声明式渲染
数据和 dom 建立了关联,修改了js中data的值,dom也会发生变化.
-
hello vue
<div id="app"> {{ message }} </div>js代码：
var app = new vue({ el: '#app', data: { message: 'hello vue!' } }) -
v-bind 指令,作用是:鼠标停留几秒,会有提示信息.
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div>js代码：
var app2 = new vue({ el: '#app-2', data: { message: '页面加载于 ' + new date().tolocalestring() } })
条件与循环
-
控制元素显示 使用
v-if，seen的值决定是否显示.<div id="app-3"> <p v-if="seen">现在你看到我了</p> </div>js代码：
var app3 = new vue({ el: "#app-3", data: { seen: true } }) -
循环 使用
v-for,在控制台输入app4.todos.push({text: 'push text'}),列表添加一个项<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>js代码：
var app4 = new vue({ el: "#app-4", data: { todos: [ { text: '学习vue' }, { text: '整个项目' }, { text: '完成毕设' } ] } })
处理用户输入
v-on指令添加一个事件监听器
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reversemessage">反转消息</button>
</div>
js代码：
var app5 = new vue({
el: '#app-5',
data: {
message: 'hello vue.js!'
},
methods: {
reversemessage: function(){
this.message = this.message.split('').reverse().join('')
}
}
})
v-model 轻松实现表单输入和应用状态之间的双向绑定.
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
js代码：
var app6 = new vue({
el: '#app-6',
data: {
message: 'hello vue!'
}
})
组件化应用构建
组件系统是 vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in grocerylist"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
js代码：
vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似与一个自定义特性。
// 这个prop 名为todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new vue({
el: '#app-7',
data: {
grocerylist: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
(假想)大型应用模板
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
源码下载
https://www.lanzous.com/b00t79wkd 密码:vue01
注解
el：对应div中的id
data：存放数据
methods: 存放方法
指令是vue提供的特殊特性,指令带有前缀
v-.