Vue.Js

阅读量：4982 次

发布时间：2019-06-12

本文共 5803 字，大约阅读时间需要 19 分钟。

渐进式框架 -Vue.js

分离与不分离的好与坏

前后端分离后后端仅返回前端所需的数据，大部分业务逻辑都是通过前端进行校验

不再渲染HTML页面，不再控制前端的效果，页面由页面服务器请求返回

而具体的数据通过JS去应用服务器去数据库请求得到

优点:减少页面的请求，页面无需去后端请求，最多去静态文件服务器拿到

前后端分工清晰,大项目开发维护教简单

缺点: 小项目如果使用前后端分离前后端沟通成本加大

Vue初识

1.Vue 一个渐进式JS框架实现单页面开发

一个页面小到一个变量，一个变量代表一个页面，大到整个项目通过Vue来控制

2.页面的切换不再是请求url 而是组件的替换，替换一个组件就是替换一个页面

3.从数据角度考虑标签而不是一个标签

Vue的使用

挂载点一般定义成一个页面,一个el只对第一个标签有效，所以挂载点一般为id

一个页面出现多个挂载点，但是一个Vue实例操作一个挂载点

所以一个el 指代一个挂载点

像{

{}} 和属性里以 v-* 打头的都会被Vue拦截

Vue替换插值处


         
          
      {
   { h1_msg }}
    
      {
   { h2_msg }}

Vue 会识别{

{ name }} 里的name会被当作插值处, 去Date找到属性，替换成真正的内容

Vue使用事件和once指令

知识点：

this 可以拿到当前的 Vue对象要拿到实例属性可以通过 this.$date.插值名

v-on:事件=“函数” 只要触发事件就会执行Vue实例的methods里的函数方法

v-once:被插值后就无法改变

{

{}} 相当于 v-text 文本

v-html 就是html 代码块

插值处可以通过索引 data[1] 拿到data 列表里具体的值

@事件可以代替 v-on:事件


         
      
       {
   { msg }}}

这样就可以通过变量驱动页面

方法传参

所有click触发效果可以绑定到一个函数里，但是我们怎么区分那个按钮点击的呢通过传参？

形参和实参数量可以不统一

实参如果是只有函数名的话会把Event传过去函数名() ，如果想传事件又想传参就得加 $event.

Vue操作属性

知识点：

v-bind:属性和 :属性一样如果属性值还是键值对形式那么插值形式可以为字典

多个类可以通过元祖的形式 class="[a1,a2]" 来表示两个两个类 style:”{fontsize:a1,color:a2}“

v-show和v-if的区别

知识点

v-show 指的是display:none

v-if :flase是注释存在缓存里改为true 从注释解开，实质是从缓存里读取出来

变为false 之后

表单指令

v-model 控制着表单的value值 input框的value也会改变model

点击会改变 v-model的值是个双向绑定的过程

单选框radio 万一和它的value值相同那么就会被选上

在checked中如果是单个的 v-model 追随为 true-value | false-value 的值如果复选的checkbox 那么就是追随values

```html
         
          
              
               
               
                   
                    
                    
                
       
        
               
                   
                    
                    男：
                    女：
                    {
    { ra_val }}        
       
        
               
               
               
                   
                    {
    { sin_val }}        
       
        
               
               
                   
                    
                    
                    {
    { more_val }}

条件指令

里面传递判断来决定该标签是否展示


     
      111
     
     
      222
     
     
      222
     
#必有一个执行 要么if 执行 要么else执行  如果两个都不执行才执行第三个

循环指令

可以循环

列表拿到值和索引

{
   { num }} {
   { index }}
  #循环第一个拿到的是数值 第二个才是索引

{
   { num }}

字典拿到

{
   { v }} {
   { k }} {
   { i }}
  #循环的是值 建  索引

解决插值表达式符号冲突

new Vue({        el: '#app',        data: {            msg: '12345'        },        delimiters: ['${', '}']    })

computed 返回值取决于局部作用域变化

里面出现的标签每发生一次变化就触发一次方法

data:{"i1":"1",i2:"2"}computed:{  i3:function(){      return self.i1 + self.i2        }}

watch 监听

watch 可以监控里面所有的插值值插值值没发生一次变化就触发对应的函数

注意每个元素都必须在data出现

局部组件

是一个html代码 css js的集合体

知识点：

1.局部组件只有在挂载点里面使用

2.因为局部的原因我们的组件是为了服用，所以数据要独立所以data 是一个函数有名称空间返回一个字典

3. -单词就可以匹配成大写的 A-aA ---> AAA


     ----> aBc

实例一个Vue对象 ,通过components注册局部组件new Vue({   el:"#app",  components:{"abc":localTag}     })

一定要在Vue 上面！！！！

let localTag={    template'
     
      111
      
       '}

去通过注册的别名来使用

全局组件

不需要在挂载点里面

Vue.component("aBc",{     template:"
     
      111
     
",    });无需注册

组件父传子

组件子传父

1.通过钩子 this.$emit("recv",this.my_info) 去触发父组件的方法

2.会把第二个参数传递给 get_name

使用服务器请求资源

既然我们要使用到单页面开发 Django的不在发挥出他的优势我们需要寻找一种轻量级的,且最好能更好的和前端打交道的服务器

此时我们使用到了JavaScript语言的服务器 Node.js ,他的居然把 V8的引擎搬到了他的Node.js上,这也是第一次有人把前端的语言作为服务器

所以Node.js没有自己的语言,就因为他使用了强大的V8引擎,所以这一小个东西，就能发挥极强的优势

1.一个Node,js只是一个单线程 2.非阻塞io 3.事件驱动

我们就可以做到点击某个按钮跳转到其他页面就不需要请求url 而是组件的替换

需要做安装（）

以及配置nmp为国内镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

搭建 Vue架子脚 cnpm install -g @vue/cli

起步

1.cd 项目路径

2.vue create 目录名

3.选择自定义

4.Y/N 选择大写的，其他都为选择第一个

5勾选 Babel jsES6语法转换ES5，Router路由 Vuex组件数据交互 Formatter格式化代码

6.完成后启动server （开发过程使用 IDE可以事实更新 npm run serve ）

项目目录

"""node_modules：依赖public：共有资源    ico：页面标签的logo    html：单页面 - 整个项目的唯一页面src：代码主体...：项目、插件等相关配置"""""" srcassets：静态资源components：小组件views：视图组件App.vue：根组件main.js：主脚本文件router.js：路由脚本文件 vue-routerstore.js：仓库脚本文件 vuex"""

View Code

组件结构

根组件导入自组件

组件的使用与跳转

挂载点内部 可以使用注册的name 来使用组 件
             
              
      
  #必须导入之后使用


     
      home
     会根据URL进行组件的替换 #需要在main.js里配
     会根据当前页url 放置组件  例如 V1在main.js 对应组件1  那么url为xxx时 对应的就是这个组件

生命周期钩子以及发送AJax

生命周期钩子

钩子是个回掉函数当触发某个条件是会执行，那么生命周期钩子就是在组件的出现阶段调用的函数

创建之前调用这个创建时立马调用这个创建之后调用另一个

beforeCreate () {        console.log("实例刚刚创建");        console.log(this.msg                        },    created () {        console.log("实例创建成功, data, methods已拥有");        console.log(this.msg);    },    mounted () {        console.log("页面已被vue实例渲染, data, methods已更新");    }    // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块

AJax

1.下载npm install axios--save2.main.js 配置全局Vue添加ajax属性import Axios from "axios"Vue.prototype.$ajax = Axios;new Vue(){} 之前3.使用mounted () {            window.console.log('Goods组件渲染完毕');            this.aaaa = 12345;            window.console.log(this.aaaa);            // 请求后台            let _this = this;            this.$ajax({                url: 'http://127.0.0.1:8000/goods/',                method: 'post',                params: {                    info: '前台数据'                }            }).then(function (result) {                let data = result.data;                // this 指向的是then的function                _this.aaaa = data;            })        }

跨域问题

django有csrf_token了但是还是无法相信绝对安全的跨域请求

通常情况下，A网页访问B服务器资源时，不满足以下三个条件其一就是跨域访问

1. 协议不同

2. 端口不同

3. 主机不同

1. 安装django-cors-headers模块2.# 注册appINSTALLED_APPS = [    ...    'corsheaders']3 添加中间件MIDDLEWARE = [    ...    'corsheaders.middleware.CorsMiddleware']4# 允许跨域源CORS_ORIGIN_ALLOW_ALL = True