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

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!’
}
})

5.组建化应用构建
这块准备后面再学