Vue的简单入门
一、什么是Vue？
vue.js也一个渐进式JavaScript框架，可以独立完成前后端分离式web项目
渐进式：vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面，最后大到整个项目，都可以用vue框架来实现
目的：通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目
二、为什么要学习Vue
1.Vue是三大前端框架之一，其他2个为：Angular ，React
2.整合了Angular React框架的优点（Vue是中国人写的，第一手API文档是中文的）
3.单页面应用（得益于vue的组件化开发，令前台的代码可以复用）
4.虚拟DOM（提高操作DOM的效应）
5.数据驱动（将数据渲染到指定区域）
6.数据的双向绑定（在页面中完成基于数据的交互方式）
三、如何在页面中使用Vue
开发版本：
生产版本：
{ { }}
{ { }}
四、Vue实例
1.el：实例
new Vue({ el: '#app'})// 实例与页面挂载点一一对应// 一个页面中可以出现多个实例对应多个挂载点// 实例只操作挂载点内部内容 2.data：数据
{ { msg }}
3.methods：方法
测试
测试
4.computed：计算
{ { c }}
5.watch：监听
{ { a }} { { b }}
6.delimiters：分隔符
${ msg }
五、生命周期钩子
-
-
钩子函数: 满足特点条件被回调的方法
new Vue({ el: "#app", data: { msg: "message" }, beforeCreate () { console.log("实例刚刚创建"); console.log(this.msg); }, created () { console.log("实例创建成功, data, methods已拥有"); console.log(this.msg); }, mounted () { console.log("页面已被vue实例渲染, data, methods已更新"); } // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块}) 六、Vue指令
1.文本相关指令
{
{ msg }}原文本
{
{ msg }}
2.斗篷指令
{ { msg }}
3.属性指令
abc
12345
4.事件指令
11111111111111
22222222222222
3333333333333333
4444444444444444
5555555555555555
5.表单指令
6.条件指令
- red
- green
- blue
.........
- red
- green
- blue
.........
7.循环指令
{ { msg }}
- { { list[0] }}
- { { list[1] }}
- { { list[2] }}
- { { list[3] }}
- { { list[4] }}
- { { n }}
- value:{ { n }} | index: { { i }}
- { { dic['name'] }}
- { { dic.age }}
- { { dic.gender }}
- value:{ { v }} | key:{ { k }} | index: { { i }}
{ { k }} : { { v }}
8.todolist案例
{ { list }}
- { { v }}
七、组件
1.什么 是组件
-
-
每个组件均具有自身的模板template，根组件的模板就是挂载点
-
每个组件模板只能拥有一个根标签
-
子组件的数据具有作用域，以达到组件的复用
2.根组件
{ { msg }}
3.局部组件
4.全局组件
5.父组件传递数据给子组件
通过绑定属性的方式进行数据传递
采用属性绑定的方式
1,父级提供数据 2.绑定给子组件的自定义属性 3.子组件通过props的数组拿到自定义属性从而拿到数据6.子组件传递数据给父组件
通过发送事件请求的方式进行数据传递
采用发生事件的方式:
1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据)2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据)3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据7.父子组件实现todolist
八、Vue-CLI项目搭建
1.环境搭建
1.安装node.js
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
2.安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v 查看cnpm 安装是否成功
3.安装脚手架
cnpm install -g @vue/cli
4.清空缓存处理
npm cache clean --force
2.项目的创建
1.创建项目
vue create 项目名// 要提前进入目标目录(项目应该创建在哪个目录下)// 选择自定义方式创建项目，选取Router, Vuex插件
2.启动、停止项目
npm run serve / ctrl+c// 要提前进入项目根目录
3.打包项目
npm run build// 要在项目根目录下进行打包操作
3.认识项目
1.项目目录
dist: 打包的项目目录(打包后会生成)node_modules: 项目依赖public: 共用资源src: 项目目标,书写代码的地方 -- assets:资源 -- components:组件 -- views:视图组件 -- App.vue:根组件 -- main.js: 入口js -- router.js: 路由文件 -- store.js: 状态库文件vue.config.js: 项目配置文件(没有可以自己新建)
2.配置文件：vue.config.js
module.exports={ devServer: { port: 8888 }}// 修改端口,选做 3.main.js
new Vue({ el: "#app", router: router, store: store, render: function (h) { return h(App) }}) 4.后缀名为vue文件
4.项目功能
1.vue-router
{ path: '/', name: 'home', // 路由的重定向 redirect: '/home'}{ // 一级路由, 在根组件中被渲染, 替换根组件的 Home |About |One |
a.router-link-exact-active { color: #42b983;} // router的逻辑转跳this.$router.push('/one-view')// router采用history方式访问上一级this.$router.go(-1) 2.vuex
// 在任何一个组件中,均可以通过this.$store.state.msg访问msg的数据// state永远只能拥有一种状态值state: { msg: "状态管理器"},// 让state拥有多个状态值mutations: { // 在一个一个组件中,均可以通过this.$store.commit('setMsg', new_msg)来修改state中的msg setMsg(state, new_msg) { state.msg = new_msg }},// 让mutations拥有多个状态值actions: {} 3.vue-cookie
// 安装cookie的命令// npm install vue-cookie --save// 为项目配置全局vue-cookieimport VueCookie from 'vue-cookie'// 将插件设置给Vue原型,作为全局的属性,在任何地方都可以通过this.$cookie进行访问Vue.prototype.$cookie = VueCookie
// 持久化存储val的值到cookie中this.$cookie.set('val', this.val)// 获取cookie中val字段值this.$cookie.get('val') 4.axios
// 安装 axios(ajax)的命令// npm install axios--save// 为项目配置全局axiosimport Axios from 'axios'Vue.prototype.$ajax = Axios
let _this = thisthis.$ajax({ method: 'post', url: 'http://127.0.0.1:5000/loginAction', params: { usr: this.usr, ps: this.ps }}).then(function(res) { // this代表的是回调then这个方法的调用者(axios插件),也就是发生了this的重指向 // 要更新页面的title变量,title属于vue实例 // res为回调的对象,该对象的data属性就是后台返回的数据 _this.title = res.data}).catch(function(err) { window.console.log(err)}) # 用pycharm启动该文件模拟后台from flask import Flask, request, render_templatefrom flask_cors import CORSapp = Flask(__name__)CORS(app, supports_credentials=True)@app.route('/')def index(): return "主页
"@app.route('/loginAction', methods=['GET', 'POST'])def test_action(): # print(request.args) # print(request.form) # print(request.values) usr = request.args['usr'] ps = request.args['ps'] if usr != 'abc' or ps != '123': return 'login failed' return 'login success'if __name__ == '__main__': app.run()