vue基础1的听课笔记
文章目录
引言
个人山东潍坊，做老师有两年。专精vue，计算机专业，学Java，14年的iOS北京市场不好，就进入前端行业。前端现在饱和了，但还是有需求。做业务强的前端还是有前途的。学完跳槽。最近研究python语言，做后端。node.js作为中间件，处理高并发；PHP、Java、node.js、python、go都可以做后端，不过各有偏向。
时长：2h
文档大纲
1历史介绍
angular 09年，年份较早；
react 2013年，用户体验好；
vue 2014年，用户体验好；
2前端框架与库的区别
jQuery库：DOM操作+请求
art-template库：模板引擎
框架：全方位功能齐全，简易的DOM体验+发请求+模板引擎+路由功能；
3vue起步
渐进式JavaScript框架
用npm下载vue。explorer敲代码。
1引入包。
2创建实例化对象。启动new Vue({el：目的地，data：数据，template：模板内容})；
数据驱动视图。当数据改变的时候，视图也跟着改变。msg是VM。div是视图。data是模型。
跳槽、vuex做组件通信容易出问题；大型项目之间的组件通信一般都是用父子组件通信、子父组件通信、平行组件通信。vue router很好用。父子组件多层通信比vuex和bus复杂。
面向百度编程、面向产品经理编程、stakoverflow程序员、面向测试编程；
4插值表达式
{{表达式}}：对象、字符串、判断后的布尔值、三元表达式；
5什么是指令
在vue中提供一些对于页面+数据的更为方便的输出，这些操作就叫做指令，如v-text\v-html.
<div v-if ='!isShow'>hhhh</div>//为ture就直接渲染，对组件销毁和重建。常用于登录
v-show总是渲染的，通过控制display来显示或隐藏，常用于频繁显示的，如导航栏；
v-on：原生事件名='函数名'，简便用法@，通过类名对元素显示隐藏；
v-bind：绑定标签上的属性（内置的属性和自定义的属性）简写；
v-for = "(item,index) in menuLists"
vue的双向数据绑定：v-model。只会体现在UI控件中。是一个语法糖，他是v-bind:value 和 v-on:input的体现。
局部组件的创建。
代码
01-vue是基本使用.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<h1>{{1+1}}</h1>
<h2>{{1>2?'真':'假'}}</h2>
<h2>{{}}</h2>
</div>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app', // mount到DOM上
data () {
msg:'hh'
return {
title: 'Hello World'
}
}
})
</script>
</body>
</html>
02-vue的指令系统
03-vue的双向数据绑定
04-局部组件的创建
总结
以上是我在开课吧的前端vue课程中听的一节课程的部分笔记。目的是查漏补缺。之前一直是看官网和一些实体书。
在听课的过程中，感觉其中数据驱动视图的讲述十分到位。div是视图，data是模型，msg是视图模型。
在这第一节课中主要讲了vue的历史，vue的基本使用（插值表达式、指令系统）