前端笔记-vue

最新推荐文章于 2023-12-16 21:51:25 发布

SSWmouse

最新推荐文章于 2023-12-16 21:51:25 发布

阅读量250

点赞数 2

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/SSWmouse/article/details/115716113

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前端笔记-vue

vue

vue基础

vue中几种常见的属性：
name //起名
data //用于存放数据
methods //用于存放方法
computed //用于存放计算属性用函数的样式写 retrun 数据
watch //侦听属性
components //组件注册
props //接收父组件传递的属性
created //生命周期-创建完成
mounted //生命周期-挂载完成
destroyed //生命周期-销毁完成
vue中的this指的是vue整个实例化对象
1. vue创建时data里面的数据是响应式的以后在添加的就是非响应式的如果想加入响应式的数据需要使用$set
2. vue常用的几种指令：
  1. v-model=数据 //写在元素属性上用在input上v-model 等同与 v-bind:vlalue
    v-bind:属性名=数据 (v-bind可以简写成 : )
  2. {{数据}} //写在tempert标签内即 Musrache语法—>双大括号语法
  3. v-on:事件=方法(v-on可以简写成 @ ) //写在元素的属性上
  4. v-if=判断
    v-eles-if //写在元素属性上如果为真渲染，为假销毁
  5. v-show=判断 //写在元素属性上如果为真显示，为假隐藏
  6. v-for//写在元素属性上，<div v-for="(item,index) in goods2" >{{item}}</div>遍历展示 item代表内容 index代表下标
  7. v-html //写在元素属性上，给元素内容加上html标签等内容
  8. v-bing:class //切换元素类名
    eg：
```
    <body>
        <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
    </body>
    <script>
    data: {
        isActive: true,
        hasError: false
        }
    </script>  // <div class="static active"></div>
```
  1. v-bind:style
    eg:
    可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
```
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
   activeColor: 'red',
   fontSize: 30
}
```
    or直接绑定到一个样式对象
```
<div v-bind:style="styleObject"></div>
data: {
   styleObject: {
       color: 'red',
       fontSize: '13px'
   }
}
```

vue-组件:

    Vue.component创建组件   //全局注册
        Vue.component("组件名",{    //通过<组件名></组件名> 来绑定组件,组件可以重复调用 
            data:function(){        // data后面只能是一个函数 防止组件内部数据互通
                return {
                    a:0;
                }
            },
            //模板后接组件显示方式，而且最多只能暴露一个标签 如果是多个标签 需要用一个div将其包裹起来
            template: `
                <div>               
                    <button @click="xxx">按钮</button>
                    <h1>{{a}}</h1>
                </div>`,
            porps:['aaa']

router路由

安装路由模块 cnpm install vue-router --save
导入路由模块：
import VueRouter from "_vue-router@3.5.1@vue-router";
Vue.use(VueRouter)

编写路由代码：

    var 组件名 = () => import('../components/zujian1.vue')
    var routes = [
        // 1. 路由注册后,我们就可以在vue的实例对象中通过this.$router来访问路由对象
        //    通过router,this.$route来访问路由参数信息
        // 2. "/" 为默认路径,一般会写默认路径
        //    "*" 为全部通配，一般会写404页面 (通配符得到的信息在参数$route.params.pathMatch中)
        //    "路径-*"  为 部分通配 通配符得到的信息在参数 $route.params.pathMatch中
        //    "路径/:动态参数名"  绑定动态参数 在对应的组件中,参数会放在route对象的params属性中(切记,是route,不是router)
        //    路由之中嵌套⼦路由 在user路由中增加⾃⼰路由: children 
        // 3.给路由命名:
        //    用name 可以通过⽤router-link通过路由名来跳转到该路由
        //    也可以通过点击事件 this.$router.push("路径"); 来跳转（函数式编程方法）
        //    或 this.$router.push({ name: "yundong", params: { name: "lisi"} }); 
        //    和 this.$router.push({ path: "/aaa/yd", query: { name: "lisi" } }); 
        //    其中有name时用params来写参数 没name时用query来写参数
        // 4.给router-view 命名:
        //    component:组件名 => components: {view名1: 组件名1，view名2: 组件名2} 
        //    然后 界面上 router-view 添加name属性 
        //    可以实现一个界面显示多个组件 但是记得设置一个默认(没起名字的router-view)
        // 5.路由重定向和别名：
        //    1.通过路径重定向 path:"/a", redirect:"/b"
        //    2.通过路由名name重定向 path:"/a", redirect:{name:"foo"}
        //    3.通过函数 进⾏动态编程 重定向  path:"/a", redirect:()=>{ retrun "/b"}
        //    4.路由别名 path:"/a",alias:"/b"
        // 6.路由传值：
        //    1.动态路由传值
        //    2.路由属性传值 对象模式传值:{path:'/pr',component: Pr, props: {newsletterPopup: false}}
        //                   函数模式传值:{path: '/se',component: Se, props: (route) => ({ query: route.query.q }) }
        // 7.检测动态参数改变
        //    beforeRouteEnter 监听进入 beforeRouteLeave 监听离开 beforeRouteUpdate 监听更新(只在自己改变的时候触发) -->路由的三个生命周期
        //    beforeRouteEnter(to,from,next){ 
        //        console.log(to)
        //        console.log(from)
        //        next()
        //    }
        { path: '/路径1', component: 组件名1 , name:"起名1" , children{ path:"/子路径" component: 子组件名},paparams:{参数名:参数值}},
        { path: '/路径2', component: 组件名2 , name:"起名2" , children{ path:"/子路径" component: 子组件名}},
    ]

axios:vue的axjx请求插件

自己写的axjx请求

    export default function (vue) {
        vue.prototype.$get = (url, fun) => {
            var aaa = new XMLHttpRequest()
            aaa.open("GET", url, true)
            aaa.send()
            aaa.onreadystatechange = function () {
                if (aaa.readyState == 4 && aaa.status == 200) {
                    fun(aaa.responseText)
                }
            }
        },
        vue.prototype.$post = (url, params, fun) => {
            var aaa = new XMLHttpRequest()
            aaa.open("POST", url, true)
            aaa.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            if (typeof params != "string") {
                let tmp_str = ""
                for (let key in params) {
                    tmp_str = tmp_str + key + "=" + params[key] + "&"
                }
                tmp_str = tmp_str.substr(0, tmp_str.length - 1)
                console.log(tmp_str)
                aaa.send(tmp_str)
            } else {
                aaa.send(params)
            }
            aaa.onreadystatechange = function () {
                if (aaa.readyState == 4 && aaa.status == 200) {
                    fun(aaa.responseText)
                }
            }
        }
    }

2.1引用插件（非包装）

    import axios from "_axios@0.21.1@axios"
    export default function (vue) {
        vue.prototype.$get = axios.get
        vue.prototype.$post = axios.post
    }
    //    axios.post('/user', {
    //      firstName: 'Fred',
    //      lastName: 'Flintstone'
    //    })
    //    .then(function (response) {
    //      console.log(response);
    //    })
    //    axios.get('/user', {
    //      params: {
    //          ID: 12345
    //      }
    //    })
    //    .then(function (response) {
    //      console.log(response);
    //    })

2.2引用插件（包装）

    import axios from "_axios@0.21.1@axios"
    export default function (vue) {
        第一种包装方式，then在get中
        vue.prototype.$get = (url, params, suc_fn, err_fn) => {
            params = params || {}
            axios.get(url, params)
                .then(
                    (res) => {
                        suc_fn ? suc_fn(res) : () => { }
                    },
                    (err) => {
                        err_fn ? err_fn(err) : () => { }
                    }
                )
        }
        //第二种包装方式，then交给使用者
        vue.prototype.$post = (url, params) => {
            return axios.post(url,params)
        }
    }

三种vue界面框架

(几种常见框架：https://www.jianshu.com/p/d6b1b0144915)
ElementUI ：https://element.eleme.cn/#/zh-CN/component/container
配置解决：https://blog.csdn.net/weixin_41876674/article/details/81207744
安装教程：
先cnpm i element-ui --save
在：cnpm install babel-plugin-component -D
最后复制.babelrc文件

vux：https://doc.vux.li/zh-CN/components/actionsheet.html
vant: https://youzan.github.io/vant/#/zh-CN/

SSWmouse

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端笔记-vue

前端笔记vuevue基础router路由axios:vue的axjx请求插件三种vue界面框架vuevue基础vue：vue中几种常见的属性： name //起名 data //用于存放数据 methods //用于存放方法 computed //用于存放计算属性用函数的样式写 retrun 数据 watch //侦听属性 components //组件注册 props //接收父组件传递的属性 created //生命周期-创建完
复制链接

扫一扫