vue2 基础学习01 （核心最基本的功能）

jiezi

6 年前

vue 学习路径和建议 —- 尤雨溪
vue 官网
根据官网一步步学习
1. 项目构建

引入 vue 库，初学时直接通过 CDN
<!– 开发环境版本，包含了有帮助的命令行警告 –>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

2. 声明式渲染

留坑
在 html 中创建区域（元素标签）
<div id=”app”>
{{message}} <!– 插值表达式 –>
</div>

实例化
在 script 标签中实例 Vue, 渲染数据
var app = new Vue({
el: ‘#app’,//element, 找到所渲染的坑位（div）
data: {// 数据
message: ‘Hello Vue!’
}
})

接下来官网介绍了指令 v -bind
从后面我了解了下 v -bind 的语法知识:
vue 单向数据流绑定：v-bind: (属性) 简写 :(属性)
例子：<input v-bind:value=”name” v-bind:class=”name”>

也可以绑定其他的属性，不仅仅是 value

单向数据绑定内存改变影响页面改变

v-bind 就是对属性的简单赋值, 当内存中值改变，还是会触发重新渲染

官网的例子简化
<div id=”app-2″>
<span v-bind:title=”message”>
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: ‘#app-2’,
data: {
message: ‘ 我就是 title 的内容，哈哈哈 ’
}
})
以上的 v-bind:title=”message” 可以简化为 :title=”message”. 以后再细学。

————–
3. 条件与循环

这块官网讲了两个指令 v -if 和 v-for

v-if
根据表达式的值的真假条件，销毁 (remove) 或重建 (append) 元素
<div id=”app-3″>
<p v-if=”seen”> 现在你看到我了 </p>
</div>
var app3 = new Vue({
el: ‘#app-3’,
data: {
seen: true // 可改为 false
}
})
将 true 改为 false，p 标签将消失！！！

v-for

循环数组、对象
<div id=”app-4″>
<ol>
<li v-for=”todo in todos”>
{{todo.text}}
</li>
</ol>
</div>
var app4 = new Vue({
el: ‘#app-4’,
data: {
todos: [
{text: ‘ 学习 JavaScript’},
{text: ‘ 学习 Vue’},
{text: ‘ 整个牛项目 ’}
]
}
})

4. 处理用户输入

这块是 v -on 事件绑定
事件绑定 v -on: 事件名 =” 表达式 || 函数名 ” 简写 @事件名 =” 表达式 || 函数名 ”

官网的例子：添加一个可以逆转一句话的事件
<div id=”app-5″>
<p>{{message}}</p>
<button v-on:click=”reverseMessage”> 逆转消息 </button>
</div>
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>
var app6 = new Vue({
el: ‘#app-6’,
data: {
message: ‘Hello Vue!’
}
})