1.使用官方脚手架，获取startup
$ npm install -g @vue-cli
$ vue create my-project
$ cd my-project
$ npm install
$ npm run dev
2.定位基础练习的playground
# 在这里开始你的表演
src/components/HelloWorld.vue
3. html基础模板语法
3.1 基础数值绑定
html
<div>
<!-- html文本绑定 -->
<div>{{ message }}</div>
<!-- html 属性值绑定 -->
<div :disabled="disabled"></div>
</div>
js
export default {
data() {
return {
message: 'hello world',
disabled: true,
}
}
}
输出
<div>
<!-- html文本绑定 -->
<div>hello world</div>
<!-- html 属性值绑定 -->
<div :disabled="true"></div>
</div>
3.2 分支模板
html
<div>
<div v-if="disabled">逻辑true</div>
<div v-else>逻辑false</div>
</div>
js
export default {
data() {
return {
disabled: true,
}
}
}
输出
<div>
<div>逻辑true</div>
</div>
3.3 列表模板
html
<div>
<div v-for="item in items" :disabled="item.disabled" >
<div>{{ item.value }}</div>
</div>
</div>
js
export default {
data() {
return {
items: [
{ disabled: true, value: 1 },
{ disabled: false, value: 2 },
{ disabled: true, value: 3 },
]
}
}
}
输出
<div>
<div disabled="true"><div>1</div></div>
<div disabled="false"><div>2</div></div>
<div disabled="true"><div>3</div></div>
</div>
3.4 模板事件处理——点击事件
html
<div>
<!-- 使用@修饰符表示事件响应 -->
<div @click="handleClick(event)">click me {{ count }}</div>
</div>
js
export default {
data () {
return {
count: 1
}
}
// 在methods中处理响应流程
methods: {
handleClick (event) {
// 此处为div被点击之后出发的后续逻辑流程
// 通过this可以指向到data中的模板数据源，修改数据源，模板绑定数据自动更新
this.count++
}
}
}
4. 【重要】基于vue(mvvm类)与jquery在开发思维模式中的转化
全面颠覆原先面向dom操作的书写方式，转向面向诸如data()中的纯粹数据的编程，dom的视图更新，交给框架来自动解决，由数据来驱动。
