精华内容
下载资源
问答
  • vuejs笔记

    2019-03-20 11:08:00
    使用脚手架vue-cli初始化工程 使用npm淘宝源 npm i -g @vue/cli vue create vue-learn npm run serve vue 模板语法 模块化 方法 自定义指令 组件 缩写 v-bind:href =>...computed: fu...

    使用脚手架vue-cli初始化工程

    • 使用npm淘宝源
    • npm i -g @vue/cli
    • vue create vue-learn
    • npm run serve

    vue

    • 模板语法

      • 模块化
        • 方法
        • 自定义指令
        • 组件
      • 缩写
        • v-bind:href => :href
        • v-on:click => @click
    • 计算属性

      • 应用场景:具有依赖关系的数据监听

        computed: function() {
            return this.data1 - this.data2;
        }
    • 类与样式

      • v-bind:class="[a1, a2]"

      • v-bind:class="obj"
        data() {
            return {
                obj: {
                    'class-1': true,
                    'class-2': false
                }
            }
        }
    • 条件和列表渲染

      • if else

      • for

        可以使用template进行for

    • 组件

      • props

        • 组件的参数传递

          props: ['age'],
      • 双向数据绑定

        • 方式1:父组件监听事件
          子组件
        <template>
        <div>
            <input type="number" placeholder="手机号" @input="handleinputchange">
            <input type="text" placeholder="邮编">
        </div>
        </template>
        
        <script>
        export default {
            methods: {
                handleinputchange(e) {
                    this.$emit("change", e.target.value)
                }
            }
        }
        </script>

        父组件

        <my-model @change="handleinput"/>
        • 方式2:使用v-model
          子组件
        <template>
        <div>
            <input type="text" placeholder="姓名" v-bind:value="myname" @input="handleinput">
            <input type="number" placeholder="年龄">
        </div>
        </template>
        
        <script>
        export default {
            model: {
                prop: "myname",
                event: "change"
            },
            props: {
                myname:String
            },
            methods: {
                handleinput(e) {
                    this.$emit("change", e.target.value)
                }
            },
        }
        </script>

        父组件

        <my-model1 v-model="model1value"/>
      • slot

        • 插槽

          <slot name="header"></slot>
          <slot name="footer"></slot>
      • 自定义事件

        • 父子组件的通信方式

        • $emit向父组件发送一个事件,父组件监听该事件

              <button @click="$emit('test', result)">click</button>
    • 路由(Vue Router)

      • 安装vue router包

        npm i vue-router

      • 编写router.js

        import Vue from 'vue';
        import VueRouter from 'vue-router';
        
        import pageA from './src/pages/a.vue';
        import pageB from './src/pages/b.vue';
        
        Vue.use(VueRouter);
        
        const routers = [
            {
                path: '/pageA',
                component: pageA
            },
            {
                path: '/pageB',
                component: pageB
            }
        ];
        
        const router = new VueRouter({
            routes: routers
        });
        
        export default router;
      • 修改main.js

        import Vue from 'vue'
        import router from './router'
        
        Vue.config.productionTip = false
        
        new Vue({
          router
        }).$mount('#app')
      • 增加vue.config.js配置文件

        module.exports = {
            runtimeCompiler: true
        }
      • 在public/index.html中增加

        <div id="app">
            <router-view></router-view>
            <router-link to="/pageA">go to pagea</router-link>
            <router-link to="/pageB">go to pageb</router-link>
        </div>

    koa2

    npm i -g koa-generator

    koa2 koa2-learn

    npm install

    转载于:https://www.cnblogs.com/xxxuwentao/p/10563676.html

    展开全文
  • VueJs笔记

    2017-05-23 14:08:00
    在使用Vuejs做开发的过程中,偶尔会遇到,动态给data添加一个属性这个属性确不能被动态监听到,只能用this.$set(prop,'prop',val)来强制监听,但是有些情况下又不需要这样操作。举个例子,页面点查询按钮之后,加载...

      在使用Vuejs做开发的过程中,偶尔会遇到,动态给data添加一个属性这个属性确不能被动态监听到,只能用this.$set(prop,'prop',val)来强制监听,但是有些情况下又不需要这样操作。举个例子,页面点查询按钮之后,加载一个applyList数组,然后遍历数组给各个元素动态加一个默认属性:isShow=false。如果是直接在ajax获取到数据,将这个没处理的数据直接赋值给data则,这个isShow就不会被watch到。如果是处理完毕之后再将处理的结果赋值给data则就正常了。

    return VueDataService.getMyApprovalList(request).then((res) => {
                    if (res.data.MessageCode == BPMUtil.enums.ErrorCodeEnums.OK) {
                        //this.applyList是data下的一个属性
                         this.applyList  = res.data.Data;
    
                        _.forEach(tmp, function (v, k) {
                            //this.$set(v, "isShowFull", false);
                            v.isShowFull = false;
                            v.approveUserListObj = this.getProcessedUsers(v.ApproveUserInfo);
                        }, this);
                    } else {
                        throw new Error(res.data.MessageText);
                    }
                }) 

     

      上面这种做法,就会导致动态添加的属性“isShowFull”没有动态绑定,下面这种做法才是正确的,即处理完数据之后再赋值。

    return VueDataService.getMyApprovalList(request).then((res) => {
                    if (res.data.MessageCode == BPMUtil.enums.ErrorCodeEnums.OK) {
                        var tmp = res.data.Data;
    
                        _.forEach(tmp, function (v, k) {
                            //this.$set(v, "isShowFull", false);
                            v.isShowFull = false;
                            v.approveUserListObj = this.getProcessedUsers(v.ApproveUserInfo);
                        }, this);
    
                        this.applyList = tmp;
                    } else {
                        throw new Error(res.data.MessageText);
                    }
                })

     强制重新渲染列表

      强制重新渲染,可以使用v-bind:key,不过这个应用在template标记上会不起作用,如

    <template v-for="action in batchApproveData.actions" v-bind:key="batchApproveData.uniqueId">
                                                    <label class="batchApproveLabel"  v-bind:class="{'span4':batchApproveData.actions.length==3,'span6':batchApproveData.actions.length==2,'span10':batchApproveData.actions.length==1}">
                                                        <input type="radio" v-icheck class="m-wrap span4" name="optionsRadios" v-on:click="batchApproveData.selectedAction=action.ActionValue" v-bind:value="action.ActionValue">{{action.ActionName}}
                                                    </label>
                                                </template>

      这个地方用了template标记,列表并不会因为key变化而重新渲染,换成div就可以正常了

    转载于:https://www.cnblogs.com/skybreak/p/6879693.html

    展开全文
  • VueJS笔记tips

    2020-03-16 21:04:18
    因为这次的目的是快速的了解一下vueJS,所以在此处的所有VueJS笔记都仅仅只是完成了功能,对于样式没有进行修饰,所以看起来非常抽,但是可以思想功能 ...

    因为这次的目的是快速的了解一下vueJS,所以在此处的所有VueJS的笔记都仅仅只是完成了功能,对于样式没有进行修饰,所以看起来非常抽,但是可以实现功能

    展开全文
  • VueJS笔记基础篇

    2018-06-09 23:21:34
    vuejs title > < script type = "text/javascript" src = "js/vue.js" > script > head > < body > < div id = "demo" > < span v-on:click = 'clickHandle' > {{ message }} span > ...
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

    $ cnpm install vue

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>vuejs</title>
            <script type="text/javascript" src="js/vue.js" ></script>
        </head>
        <body>
            <div id="demo">
                <span v-on:click='clickHandle'>{{message}}</span>
            </div>
    
            <script>
                let data={
                    message:'hello,vuejs'
                }
    
                var vm = new Vue({
                    el:'#demo',
                    data:data,
                    methods:{
                        clickHandle:function(){
                            alert(1);
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    <!-- 完整语法 -->
    <a v-bind:href="url"></a>
    <!-- 缩写 -->
    <a :href="url"></a>
    
    <!-- 完整语法 -->
    <a v-on:click="doSomething"></a>
    <!-- 缩写 -->
    <a @click="doSomething"></a>

    `

    v-else-if    v-if   v-for
    
    展开全文
  • 派拉培训-Vuejs笔记

    2019-11-19 09:07:25
    axios ES7: async await ...三个菜单(路由切换)-》指令集(v-text)v-text,todolist(Vuex),第三个,随意发挥。 ...类似知乎的网站的头部和卡片 基于elementUI ...会Nodejs(express),用Nodej...
  • VUE学习笔记 https://cn.vuejs.org/ MVVM设计模式 data是关键 vscode 下载插件vetur live server v-for指令:循环数组 v-on:绑定事件 v-model:绑定值 组件化开发 1.全局注册 驼峰式命名但是使用的使用要用短...
  • snowpack + vuejs 笔记

    2020-11-17 04:02:12
    随着Vuejs及其构建工具VueCli的发展,我们已经可以使用他们完成极端复杂的应用构建了。然而,尽管有好看的UI界面和丰富的插件,VueCli构建工具依赖的Webpack打包工具却日益力不从心。越来越重的打包工具拖慢了开发时...
  • VueJs 学习笔记

    2017-02-28 11:20:00
    VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库) VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) 比较其他框架:https://cn.vuejs.org/v2/guide/comparison.html ...
  • VueJs学习笔记

    2020-11-08 00:56:08
    VueJs学习笔记一、入门创建vue实例插值表达式(mytext="\Hello\")v-model (双向数据绑定)v-forv-on 简写 @事件="方法名"v-show="参数"v-if="参数"v-on:事件="方法" 简写 @事件="方法"消息事件阻止事件冒泡阻止默认...
  • VueJs项目笔记

    2018-09-11 09:34:40
    VueJs项目笔记 一、https://segmentfault.com/a/1190000010191885 实际vue项目中的问题解决办法。 二、vue-cli(vue脚手架)超详细教程 https://blog.csdn.net/wulala_hei/article/details/80488674...
  • Vuejs教学笔记

    2019-08-10 09:24:14
    Vue.js是一个轻量级MVVM(Model-View-ViewModel)框架,和angular、react类似,其实就是所谓的数据双向绑定
  • VueJS学习笔记

    2017-12-06 13:43:35
    v-bind单向数据绑定,结合class使用方式如下,根据数组中值选择使用不同的class。 v-for使用key增加dom节点和js数组的关联关系,可提升性能。可用于数组和对象的循环。 ...v-bind:class 可简写:class, v-on:click...
  • vuejs学习笔记

    2019-07-19 19:07:36
    今天学习vuejs遇到了一个很好的UI组件ElementUI,在使用过程中使用布局组件时遇到一个需求:就是让div中的文字水平且垂直居中显示,对于水平来讲,使用text-align即可,垂直居中则需要div的height属性和line-height...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,093
精华内容 437
关键字:

vuejs笔记

vue 订阅