这里作为一个八股文,到时候面试的时候扫盲,在回来考古一下。
npm是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下集中:
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
渐进式的含义:主张最少, 没有多做职责之外的事
Vue 有些方面是不如 React,不如 Angular.但它是渐进的,没有强主张, 你可以在原有系统的上面,把一两个组件改用它实现,当 jQuery 用;
也可以整个用它全家桶开发,当 Angular 用;还可以用它的视图,搭配你自己设计的整个下层用。
你可以在底层数据逻辑的地方用 OO 和设计模式的那套理念,也可以函 数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做 不该做的事,仅此而已。
前后端分离
前后端分离时前端项目和后端项目运行在不同的服务器上,前端和后端的服务器之间进行通信获取数据。普遍的,前端项目使用vue或react进行编写,运行在nginx服务器上。后端项目使用springboot,运行在tomcat服务器上。
前后端服务器通信的实现方式是使用ajax这门技术,在Vue中对官方推荐使用的是axios技术,是对ajax的一个封装增强,本质上还是ajax。这门技术前后端都必须要掌握,十分重要。
前端服务器向后端服务器接口发送ajax请求,获取数据,使用vue框架,将数据渲染在页面上。
后端编写api接口,接受前端请求,将查询出来的数据封装起来返回给前端服务器。
至此,前端人员只需要编写页面,发送请求,获取数据,渲染页面。后端人员只需要编写接口,接受请求,处理业务,数据持久化。做到了前后端各司其职,高效开发。
数据双向绑定
单向数据绑定
指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。
单向数据绑定缺点:HTML代码一旦生成完以后,就没有办法再变了,如果有新的数据来了,那就必须把之前的HTML代码去掉,再重新把新的数据和模板一起整合后插入到文档流中。 简单的来说就是DOM操作直接改变
数据数据双向
数据模型(Module)和视图(View)之间的双向绑定。
用户在视图上的修改会自动同步到数据模型中去,同样的,如果数据模型中的值发生了变化,也会立刻同步到视图中去。双向数据绑定的优点是无需进行和单向数据绑定的那CRUD(Create,Retrieve,Update,Delete)操作双向数据绑定最经常的应用场景就是表单了,这样当用户在前端页面完成输入后,不用任何操作,我们就已经拿到了用户的数据存放到数据模型中了。
基础命令
基础用法
<div id="app">
<h1>{{ message }}</h1>
<h1>{{ list[2] }}</h1>
<h1>{{ dict.nihao }}</h1>
</div>
var app = new Vue({
el: '#app', //绑定的id
data: {
message: 'Hello Vue!',
list: [1,2,3,4],
dict: {
1:this.message,
nihao:'wohao'
}
}
methods:{
add:funtion(){
this.list[0] += 1
}
}
})
v-on
v-on:处理用户输入
@keyup.enter = "methods"
v-on:click="reverseMessage"
eg
<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-if
v-if:根据表达式的真假,切换元素的显示和隐藏(这里的隐藏是指直接删除了dom)操控dom消耗资源较大。
v-if="true"
v-if="isShow"
v-if="表达式"
eg:
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
v-bind
v-bind:设置元素的属性,可以让鼠标悬停时显示的内容
v-bind:属性名=表达式
v-bind:src="imgSrc"
v-bind:title="imgtitle+'!!!!'"
v-bind:class="isActive?'active':"""
v-bind:class="{active:isActive}"
eg:
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
v-for
根据数据生成列表结构
场合数组结合使用
v-for = "it in arr"
v-for = "(it,index) in arr"
v-for = "(key,value,index) in dict"
eg:
<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: '整个牛项目' }
]
}
})
v-model
获取和设置表单元素的值(双向数据绑定)
- 便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素想关联
- 绑定的数据<>表单元素的值
eg:
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
组件化应用构建
组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:
这里我的理解就是自定义组件名,类似泛型编程
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量,即其内容可以是动态的。
我们也需要为每个组件提供一个“key”,稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
与自定义元素的关系
- Web Components 规范已经完成并通过,但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下,Vue 组件不需要任何 polyfill,并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时,Vue 组件也可以包装于原生自定义元素之内。
- Vue 组件提供了纯自定义元素所不具备的一些重要功能,最突出的是跨组件数据流、自定义事件通信以及构建工具集成。
vue和flask进行通信
axios:ajax的升级版
get请求
var app = new Vue({
el:"#aPP",
data:{
joke:"搞笑的笑话"
},
methods:{
getJokes:function(){
var that = this;
//this.joke
axios.get("地址").then(function(response){
//this.joke?
that.joke = response.data;
}, function(err){});
}
}
})
axios回调函数中的this已经改变,无法访问到data数据,因此这里我们把this保存起来,回调函数中直接使用保存的this即可。
post请求
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.post('https://www.runoob.com/try/ajax/demo_axios_post.php',
{
firstName: 'Fred',
lastName: 'Flintstone'
}
)
.then(response => (this.info = response))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
})
多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));