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的基本使用（插值表达式、指令系统）