Vue(新手入门，基础语法1、2，路由)

三、Vue基础语法2

目录;

1.样式绑定

示例;

<--定义示例样式-->
<style> 
.fontClass { 
    font-size: 40px;
}
.colorClass {
    color: red;
}
</style>

<!--使用-->
<p>
    <span v-bind:class=;fc;>fafa</span>
</p>
<p>
    <!--简写-->
    <span :class=;ac;>fafa</span>
</p>

<p>
    <!--直接使用style样式单-->
    <span style=;font-size: 40px; color:blue;;>aaa</span>
    <br/>
    <!-- 使用vue;样式名称为驼峰风格 。花括号;多个属性逗号分隔-->
    <span :style=;{fontSize:fontSize;;px;,color: color};>bbb</span>
    <br/>
    <span :style=;myStyle;>test</span>
</p>

var vm = new Vue({
    el: ;#app;,

    data: {
        fc: ;fontClass;,
        ac: [;fontClass;, ;colorClass;],

        fontSize: 40,
        color: ;green;,

        //样式对象;注意;样式名使用驼峰命名;如;fontSize
        myStyle: {
            fontSize: ;50px;,
            color:;red;,
            fontWeight: ;bold;
        }
    }
});

2. 事件修饰符

几个常用的事件修饰符;

示例;

<div>接收消息;{{receverMsg}}</div>
<p>
    <!--响应多次或一次点击事件-->
    <input type=;text; v-model=;sendMsg;>
    <button ;click=;sender;>发送(多次)</button>
    <button ;click.once=;sender;>发送(一次)</button>
</p>
<p>
    <!-- 阻止表单提交 -->
    <form action=;testAction.action; method=;post; ;submit.prevent=;doSubmit();>
        <label>名称</label>
        <input type=;text; name=;name;/>
        <input type=;submit; value=;提交;/>
    </form>
</p>

var vm = new Vue({

    el: ;#app;,

    data: {
        receverMsg: null,
        sendMsg: null
    },

    methods: {
        sender: function() {
            this.receverMsg = this.sendMsg;
        },
        doSubmit: function() {
            alert(;ok;);
        }
    }

});

3. 按键修饰符

Vue允许为v-on在监听键盘事件时添加按键修饰符。
示例;

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13=;submit;>

<!-- 利用下面的写法有同样的效果 -->
<input v-on:keyup.enter=;submit;>

示例;响应enter键事件

<input type=;text; ;keyup.13=;doSubmit; v-model=;name;>

var vm = new Vue({

    el: ;#app;,

    data: function() {
        return {
            name: ;hello vue;
        }
    },

    methods: {
        doSubmit: function() {
            alert(;响应enter;; ; this.name);
        }
    }
});

4. 常用控件

4.1 常用控件示例

通过实现一个类型注册的页面;熟悉常用的控件。文本框/密码框/文本域/单选/多选/下拉列表

<div id=;app;>
    <div>
        <label>账号;</label>
        <input type=;text; v-model=;uname;>
    </div>
    <div>
        <label>密码;</label>
        <input type=;password; v-model=;upwd;>
    </div>
    <div>
        <label>年龄;</label>
        <input type=;text; v-model=;age; >
    </div>
    <div>
        <label>性别;</label>
        <input type=;radio; v-model=;sex; value=;1;>男
        <input type=;radio; v-model=;sex; value=;2;>女
    </div>
    <div>
        <label>爱好;</label>
        <div style=;display: inline;; v-for=;h in hobbies;>
            <input  type=;checkbox; :value=;h.id; v-model=;hobby;/>{{h.name}}
        </div>
    </div>
    <div>
        <label>地区</label>
        <select v-model=;selectedCity;>
            <option value=;;>-- 请选择 --</option>
            <option v-for=;c in city; :value=;c.id;>{{c.name}}</option>
        </select>
    </div>
    <div>
        <label>备注;</label>
        <textarea v-model=;remark;></textarea>
    </div>
    <div>
        <input type=;checkbox; v-model=;flag;>是否已阅读并同意协议
    </div>
    <div>
        <button ;click=;submit; :disabled=;disabled;>提交</button>
    </div>
</div>

var vm = new Vue({

    el: ;#app;,

    data: {
        uname: ;;,
        upwd:;;,
        age:;;,
        sex: 1,

        //用于通过v-for指令输出多选框列表
        hobbies:[
            {id: ;1;, name:;打游戏;},
            {id: ;2;, name:;编程;},
            {id: ;3;, name:;旅游;}
        ],
    
        /*
         * 用于通过v-model双向绑定,保存用户的选择。
         * 此处为多选;需要通过数组接收;否则无法
         * 正常接收复选框的值;且复选框的行为也不正常;
         * 可能出现要么全部被选择;要么全部被取消的情况
         */
        hobby:[],

        remark: null,

        //用于生成地区选择列表
        city:[
            {id:;1;, name:;长沙;},
            {id:;1;, name:;株洲;},
            {id:;1;, name:;湘潭;}
        ],

        //用于保存用户选择的地区
        selectedCity: ;;,

        //是否同意协议,默认值为false
        agreed:false,

        //提交按钮是否禁用,默认为true
        disabled: true
    },

    //监控agreed属性,如果同意协议则将提交按钮
    //设置为可用,否则提交按钮为禁用状态
    watch: {
        agreed: function(val) {
            if(val) {
                this.disabled = false;
            }else{
                this.disabled = true;
            }
        }
    },

    methods: {
        submit: function() {
            let data = {
                uname: this.uname,
                upwd: this.upwd,
                age:this.age,
                sex: this.sex,
                hobby: this.hobby,
                city: this.selectedCity,
                remark: this.remark
            }
            console.log(data);
        }
    }

});

不使用监视器的简单方式; 删除监听器;然后将提交按钮的做如下修改

<button ;click=;submit; :disabled=;!agreed;>提交</button>

4.2 修饰符

以.number为例;示例修饰符的使用;将输入的年龄属性转换为数值型

<div>
    <label>年龄;</label>
    <input type=;text; v-model.number=;age; >
</div>

5. 自定义指令

Vue除支持内置的v-model/v-show等指令;还允许自定义指令。 vue2中;代码的复用和抽象的主要形式是组件;但在有些情况下仍然需要对普通dom元素做底层操作;这种情况下需要自定义指令。根据自定义指令的作用范围;可分为;全局、局部两种

钩子函数;

指令钩子函数会被传入以下参数;

5.1 局部

通过自定义标签设置文字颜色

<div id=;app;>
    <!--red绑定到data里面的变量-->
    <p v-color=;red;>我是自定义指令</p> 
</div>

var vm = new Vue({
    el: ;#app;,
    data: {
        red:;red;
    },
    //自定义指令;局部
    directives:{
        color: {
            inserted: function(el,binding) {
                 console.log(el,binding);
                 el.style.color = binding.value;
            }
        }
    }
});

5.2 全局

<div id=;app;>
    <!--red绑定到data里面的变量-->
    <p v-color=;red;>我是自定义指令</p> 
</div>

//自定义标签,全局
Vue.directive(;color;, {
    inserted: function(el,binding) {
         console.log(el,binding);
         el.style.color = binding.value;
    }
})

var vm = new Vue({
    el: ;#app;,
    data: {
        red:;red;
    }
});

6. vue组件;重点;

6.1 组件介绍

组件命名规则

props

6.2 局部组件

定义语法;new Vue({el:;#d1;,components:{组件名;{配置选项}}})

<div id=;app;>
     <div>
         <!--title是用来传值的自定义属性;在自定义组件的props中定义 -->
         <button-counter title=;测试;/>
     </div>
</div>

var vm = new Vue({
    el: ;#app;,
    data: {
        ts: new Date().getTime()
    },

    //局部自定义组件
    components: {
    
        //组件名: {配置项}
        ;button-counter;:  {
            
            //用来传值的自定义属性
            props:[;title;],

            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: ;<button ;click=;doClick;>{{title}};局部组件;点击计数器:{{count}}</button>;,

            //注意;在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },
            
            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明
                    //的vue实例.
                    this.count;;;
                }
            }
        }
    }
});

注;为什么在自定义组件中必须使用函数方式来声明data?
每个自定义组件使用函数方式来声明data;这样每个实例可以维护一份被返回对象的独立的拷贝;在定义自定义组件时;一定要注意这一点。

6.3 全局组件

将上面的局部组件修改为全局组件。
全局组件定义语法;Vue.component(组件名, 配置选项)

<div id=;app;>
    <div>
        <button-counter title=;测试;/>
    </div>
</div>

//全局组件
Vue.component(;button-counter;, {

    //用来传值的自定义属性
    props:[;title;],
    
    //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
    template: ;<button ;click=;doClick;>{{title}}: 全局组件;点击计数器:{{count}}</button>;,

    //注意;在自定义的组件中需要使用函数来定义data
    data: function() {
        return {
            count: 0
        }
    },
    
    //定义响应事件函数
    methods: {
        doClick: function() {
            //注意此处this的作用返回是自定义组件,而不是上面声明
            //的vue实例.
            this.count;;;
        }
    }
});

var vm = new Vue({
    el: ;#app;,
    data: {
        ts: new Date().getTime()
    }
});

7. 自定义事件

Vue自定义事件是为组件间通信设计; vue中父组件通过prop传递数据给子组件;而想要将子组件的数据传递给父组件;则可以通过自定义事件的绑定

7.1 子 -> 父

触发事件;$emit(eventName, 参数...)
注意;事件名必须用短横线命名方式。

<div id=;app;>
     <!--子组件到父组件-->
     <div>
         <button-counter v-on:click-test=;clickTest;/>
     </div>
</div>

var vm = new Vue({
    el: ;#app;,
    data: {
        ts: new Date().getTime()
    },

    //对于自定义的button-counter组件, Vue实例为父组件
    //在父组件中定义一个test方法,子组件调用该方法
    methods: {
        clickTest: function(msg) {
            console.log(;test: ;; msg);
        }
    },

    //局部自定义组件
    components: {

        //组件名: {配置项}
        ;button-counter;:  {

            //用来传值的自定义属性
            props:[;title;],

            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: ;<button ;click=;doClick;>{{title}};局部组件;计数:{{count}}</button>;,

            //注意;在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },

            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
                    //注意事件名使用短横线命名方式
                    this.$emit(;click-test;,;hello vue;);
                }
            }
        }
    }
});

7.2 父 -> 子

注意;props定义属性时采用的是驼峰命名法;而在html中使用时需要对应的变为短横线命名法;;

<div id=;app;>
     <!--子组件到父组件-->
     <div>
             <!-- 注意此处将定义props时的驼峰命名法;变为了短横线命名法 !!! -->
             <button-counter title-desc=;测试; />
     </div>
</div>

var vm = new Vue({
    el: ;#app;,
    data: {
        ts: new Date().getTime()
    },

    //对于自定义的button-counter组件, Vue实例为父组件
    //在父组件中定义一个test方法,子组件调用该方法
    methods: {
        clickTest: function(msg) {
            console.log(;test: ;; msg);
        }
    },

    //局部自定义组件
    components: {

        //组件名: {配置项}
        ;button-counter;:  {

            //用来传值的自定义属性
            //注意此处使用驼峰命名法 !!!
            props:[;titleDesc;],

            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: ;<button ;click=;doClick;>{{titleDesc}};局部组件;计数:{{count}}</button>;,

            //注意;在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },

            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
                    //注意事件名使用短横线命名方式
                    this.count ;;;
                    console.log(this.titleDesc);
                }
            }
        }
    }
});

四、Vue路由

目录;

1 vue中文件及文件夹命名规范

命名法
驼峰式命名法(camelCase)
短横线命名(kebab-case)全小写
帕斯卡命名法(PascalCase)

文件夹命名
kebab-case
尽量使用名词;尽量使用一个单词

*.js文件命名规范
3.1 所有模块的主文件index.js全小写
3.2 属于组件的.js文件;使用PascalBase风格
3.3 其他类型的.js文件;使用kebab-case风格

*.vue文件命名规范
除index.vue之外;其他.vue文件统一用PascalBase风格

*.less文件命名规范
统一使用kebab-case命名风格

前三点比较重要;需要记住

附录一;.less为后缀的文件是什么
1、less是什么;LESS 为 Web 开发者带来了福音;它在 CSS 的语法基础之上;引入了变量;Mixin;混入;;
运算以及函数等功能;大大简化了 CSS 的编写;并且降低了 CSS 的维护成本;就像它的名称所说的那样;LESS 可以让我们用更少的代码做更多的事情。
2、为什么有less;CSS 是一门非程序式语言;CSS 需要书写大量看似没有逻辑的代码;不方便维护及扩展;不利于复用
3、less最最最最最最简单实例;使用;符号来定义变量

2. SPA

2.1 SPA简介

单页Web应用;single page application;SPA;;就是只有一个Web页面的应用;是加载单个HTML页面;并在用户与应用程序交互时动态更新该页面的Web应用程序

单页面应用程序;
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中

传统多页面应用程序;
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面

优势
减少了请求体积;加快页面响应速度;降低了对服务器的压力
更好的用户体验;让用户在web app感受native app的流畅

2.2 SPA技术点

3. 使用路由建立多视图单页应用

3.1 引入依赖库

建立一个基本html项目;创建一个demo页面并引入一下js库文件

3.2 创建自定义组件

创建vue组件有两种方式;

相关知识点;
js中const,var,let区别?分别写一个例子

创建一个Home组件和About组件

//组件名用PPascalCase风格
const Home = Vue.extend({
    //必须定义一个根元素作为容器,包裹模板中的内容元素
    template: ;<div><h1>Home组件</h1><div>Home组件内容区</div></div>;
});

const About = Vue.extend({
    //必须定义一个根元素作为容器,包裹模板中的内容元素
    template: ;<div><h1>About组件</h1><div>About组件内容区</div></div>;
});

3.3 创建路由

3.3.1 什么是路由

vue的单页面应用是基于路由和组件的;路由用于设定访问路径;并将路径和组件映射起来。
传统的页面应用;是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中;则是路径之间的切换;实际上就是组件的切换。
路由就是SPA;单页应用;的路径管理器。再通俗的说;vue-router就是我们WebApp的链接路径管理系统。

route和router的区别

3.3.2 定义路由

//定义路由;;/;代表根路径;路由中可以使用name属性;一遍情况不建议使用
var routes = [
    {path: ;/home;,component: Home},
    {path: ;/about;,component: About}
];

//创建路由器实例
const router = new VueRouter({
    routes: routes
});

3.4 创建和挂载根实例

使用路由后;Vue实例的创建于以前会有一定的区别;原来使用el属性指定边界;使用路由后需要使用Vue实例$mount方法挂载根实例

//创建和挂载根实例
var vm = new Vue({
    //el: ;#app;,
    //将路由放入vue实例
    router: router,
    data: {
        ts: new Date().getTime()
    }
}).$mount(;#app;);

3.5 使用RouterLink和RouterView组件导航与显示

<div>
    <router-link to=;/home;>go to Home</router-link>
    <router-link to=;/about;>go to aboue</router-link>
</div>
<div>
     <router-view></router-view>
</div>

<router-view></router-view>路由内容显示区域。

4. router-link相关属性

4.1 to

表示目标路由的链接
<router-link to=;/home;>Home</router-link><!-- 字符串-->
<router-link v-bind:to=;;home;;>Home</router-link><!-- 使用 v-bind 的 JS 表达式 -->
上面的示例已经使用;to既可以使用字符串;也可以使用js表达式

4.2 replace

设置 replace 属性的话;当点击时;会调用 router.replace() 而不是 router.push();导航后不会留下 history 记录。
样例;

<router-link :to=;{ path: ;/home;}; replace></router-link>

如果配置了replace;则在点击该链接;将会导致history记录被清空;不能再执行回退。

vue中导航中的后退-前进-编程式导航

this.$router.push({    
       path:;/home;
});
//或者使用path;推荐path
this.$router.push({    
       path:;/home;
});

<p>
    <button ;click=;previous;>前进</button>
    <button ;click=;next;>后退</button>
</p>

methods: {
    //前进
    previous: function() {
        this.$router.go(1);
    },
    //后退
    next: function() {
        this.$router.go(-1);
    }
}

<button ;click=;gotohome;>回家</button>

gotohome: function() {
    console.log(;go to home;);
    this.$router.push({
        path: ;/home;
    });
}

//定义路由表
var routes = [
    //默认显示home
    {path:;/;, component:Home}, 
    {path:;/home;, component:Home},
    {path:;/about;, component:About}
];

<router-link to=;/home;>Home</router-link>

<router-link to=;/home; replace>Home</router-link>

<router-link :to=;{ path: ;relative/path;}; append></router-link>

<router-link to=;/foo; tag=;li;>foo</router-link>

<router-link v-bind:to = ;{ path: ;/route1;}; event = ;Mouse+over;>Router Link 1</router-link>