我只是想体面地活着，想靠出卖自己的智力与技能而非脸皮或良心去谋生，想变得更强，想走遍天下都有饭吃，哪怕996我也无怨无悔，仅此而已，这就是我选择当程序员的原因

预习

最火前端框架 Vue.js

最流行前端框架 React (开发网站, 开发移动App)

三大前端框架

Vue.js 只关注视图层, 易上手,便于与第三方库兼容 MVC中的 V这一层

前端的主要工作?

视图层编写

为什么用

使用框架提高开发效率

之前写原生JS, 存在浏览器兼容性问题, jQuery之类类库解决浏览器的兼容性问题

前端模版引擎 , 数据渲染问题消耗浏览器性能

这时出现了Angular.js 使用框架能够减少不必要的DOM操作, 提高渲染效率

双向数据绑定

Vue.js核心用户不再操作DOM元素, 更多时间关注业务逻辑.

MVC 最麻烦的是C层

框架和库的区别

框架: 完整的解决方案, 对项目的侵入性大, 更换框架需要重构整个项目.

好处就是一整套的业务解决方案.

比如说从Angular.js切换到Vue.js很难

库(插件): 提供某些功能, 对项目的侵入小

MVC和MVVM

MVC 是后端的分层开发的概念

M: model 处理数据的CRUD

V: 视图层前端页面

C: 业务逻辑层路由是里面的一部分主要是 Controller.

MVVM 是前端

用户界面的渐进式框架
Vue被设计成自底向上逐层应用

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8" />
       <title>快速入门</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
    <body>
     <div id="app">
         {{ message }}
        </div>
 </body>
    <script>
       //view model
     
     var app = new Vue({
          el: '#app',
          data: {
              message: 'Hello Body!'
           }
        });
  </script>
</html>

数据和DOM建立关联, 响应式的.

声明式渲染

指令 v-

在渲染DOM上响应行为

<v-bind:title="message">
意思是: 将元素节点的title特性和Vue实例的 message属性保持一致

再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新

条件与循环

<div id="app-4">
  <ol>
    <li v-for="todo in todoList ">
        {{ todo.text }}
    </li>
  </ol>
</div>

// 对象
var app4 = new Vue({
    el: '#app-4',
    data: {
        todoList: [
        { text: 'xxx'},
        { text: 'vue'},
        { text: 'project'}
        ]
    }
});

处理用户输入 v-on

v-on 添加事件监听器通过它调用Vue实例中定义的方法

div 的id ="app-5"
{{ message }} 显示的内容 

button 的指令 v-on:click = "reverseMessage" Vue实例中定义的方法名 

<!-- 定义vue-->

var app5 = new Vue({
// el : 指定页面的那个元素
    el: '#app-5',
    // data: 数据 { message }
    data: {
        message: 'Hello, Vue.js'
    },
    methods: {
        reverseMessage: function(){
            this.message = this.message.reverse().
        }
    }
})

      var app5 = new Vue({
         el: '#app-5',
            data:{
               message: 'Hello, Vue.js!'
            },
           methods:{   
             reverseMessage: function(){
                  this.message = this.message.split('').reverse().join('')
             }
            }
        })

v-model

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

组件化应用构建

组件系统可复用组件任意类型的应用界面

组件本质预定义的Vue实例

怎么注册组件 ?

// 名为 todo-item的组件
Vue.component('todo-item',{
    template: '<li> 注册组件 </li>'
})

// 构建另一个组件模版 
<ol>
// 可以使用todo-item标签
<todo-item></todo-item>
</ol>
会为每个待办项渲染同样的文本 这样不好

我们将从父作用域将数据传到子组件 

修改todo-item组件

Vue.component('组件名', { 
    props: ['todo'],
    template: ''
})

数据与方法

Vue 实例创建, Vue的响应系统加入了其data对象中能找到的所有属性,
这些属性的值发生变化时, 视图会产生响应
随之更新

注意的是只有当实例被创建时 data 中存在的属性才是响应式的

Vue实例

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

Vue 组件都是 Vue 实例，并且接受相同的选项对象

Vue 实例创建初始化过程

设置数据监听
编译模版
将实例挂载到DOM
数据变化更新DOM

案例

表
工程 simple-webapp
工程结构

Vue / user.js

axios

Promise 对象

AJAX请求是异步执行的，也就是说，要通过回调函数获得响应

请求方法路径 .do 传递参数

1	ax ( ,{params:{id: userId}} )

传递的JSON对象 Controller类接收时用 @RequestBody

user.html 点击修改

1	<button type="button" class="btn btn-outline" data-dismiss="modal" @click="update">修改</button>

user.js

var app = new Vue({
    el: '#app',
    data: {
        user:{
            id: "",
            username: "",
            password: "",
            sex: "",
            age: "",
            email: ""
        },
        userList: []
    },
    methods:{
        findAll:function() {
            //     //在当前方法中定义一个变量，表明是vue对象
                var _this = this;
                axios.get('/vue/user/findAll.do')
                    .then(function (response) {
                        _this.userList = response.data;//响应数据给userList赋值
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
        },
        findById:function (userid) {
            // //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.get('/vue/user/findById.do',{params:{id:userid}})
                .then(function (response) {
                    _this.user = response.data;//响应数据给userList赋值
                    $("#myModal").modal("show");
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        update: function (user) {//post请求
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.post('/vue/user/updateUser.do', _this.user)
                .then(function (response) {
                    _this.findAll();
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
        },
        created: function () {
            this.findAll();
        }
});

触发方法 update 访问 updateUser.do
UserController


@Autowired
private IUserService userService;

@RequestMapping("/updateUser.do")
public void updateUser(@RequestBody User user){
    System.out.println(user);
    userService.updateUser(user);
}

接口(IUserService)的实现类(UserServiceImpl) 的updateUser方法触发持久层接口(IUserDao) 的方法执行SQL

/**
 * 更新用户
 * @param user
 */
@Update("update user set username=#{username},password=#{password},age=#{age},sex=#{sex},email=#{email} where id=#{id}")
void updateUser(User user);

Vue学习Vue.js为什么用框架和库的区别MVC和MVVM 为什么用框架和库的区别 MVC和MVVM