Vue的简单实用

Vue事件

语法:
使用v-on指令注册事件
<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>

 <!--v-on:click="f方法名点击，调用方法 -->
    <button v-on:click="f">点我</button>
<script>
    new Vue({
        el:'#add',
        data:{
            num:0
        },
        methods:{
            f(){
                alert()
            }
        }

    })

</script>

简写方式
<标签 @事件句柄=“表达式或者事件处理函数”></标签>

<!--@click="f('显示的值')"简写-->
    <!--<button @click="f('xx')">点我</button>-->

    <!--可以点击属性，++自增-->
    <button @click="num++">{{num}}</button>
    

计算属性和watch

 data:{
      birthday:1529032123201 // 毫秒值
  }

Vue中提供了计算属性，来替代复杂的表达式：

div id="add">
    <!--你的生日是2015-4-15-->
    你的生日是{{dateForm}}
</div>

<script>
    new Vue({
        el:'#add',
        data:{
            date:1429032123201
        },
        methods:{

        },
        computed:{
            dateForm(){
                return     new  Date(this.date).getFullYear()+'-'+(new  Date(this.date).getMonth()+1)+"-"+
                            new  Date(this.date).getDate()
            }
        }

    })

</script>

Watch

watch可以让我们监控一个值的变化。从而做出相应的反应。

<div id="add">
{{msg}}
<input v-model="msg">
</div>

<script>
    new Vue({
        el:'#add',
        data:{
                msg:''
        },
        methods:{

        },
        watch:{
            msg(newVal,oldVal){
                    console.log(newVal,oldVal)
            }
        }

    })

</script>

组件

组件是用来完成特定功能的一个自定义的HTML标签
全局组件

<div id="add">
        <!-- 自定义的组件名称my-->
        <nk></nk>

    </div>

    <script>
        // 全局注册组件
        // 第一个参数就是组件的名称
        // 第二参数是个对象，里面很多对组件配置
        Vue.component('nk',{
                template:'<h1>年少有为不自卑</h1>',

        })

        new Vue({
            el:'#add',
            data:{

            },
            methods:{

            }

        })

    </script>

局部组件语法：

var app = new Vue({
    el: "#app",
    data: {},
    components : {
        "局部组件的名字1" : {组件的配置对象}
        "局部组件的名字2" : {组件的配置对象}
    }
  });

组件中数据的定义
语法:
"组件的名字":{
	template: "",
	data : function(){
		return {
		  键1:值1,
		  键2:值2
		}
	}
}

注意事项:
data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码
只能够在各自的组件模板中使用各自的组件中的data数据
Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用

路由

路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。

地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

换成淘宝镜像
npm config set registry http://registry.npm.taobao.org/

<div id="app">
	<!-- 使用 router-link 组件来导航. -->
	<!-- 通过传入 `to` 属性指定链接. -->
	<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
	<!-- 使用app中的路由：匹配到product路由地址，然后在router-view标签中展示这个地址对应的资源 -->
	<router-link to="/product">公司产品</router-link>
	<router-link to="/about">关于我们</router-link>
	<hr />
	<!-- 路由出口 -->
	<!-- 路由匹配到的组件将渲染在这里 -->
	<router-view></router-view>
</div>

<div id="add">
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">发现音乐</router-link>
        <router-link to="/mymusic">我的音乐</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <!--路由将会显示在这里-->
    <router-view></router-view>
</div>

<script>
    new Vue({
        el:"#add",
        router:new VueRouter(
            {
                routes:[

                    { path: '/', component: {template:'<h1>发现音乐</h1>' }},
                    { path: '/mymusic', component: {template:'<h1>我的音乐</h1>' }}

                ]
            }
        )
    })

</script>

webpack打包

为什么需要打包
将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率
将ES6的高级语法进行转换编译，以兼容老版本的浏览器
将代码打包的同时进行混淆，提高代码的安全性

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析，然后将这些模块按照指定的规则生成对应的静态资源。

安装

本地安装：
npm install webpack --save-dev
npm install webpack-cli --save-dev
全局安装：
npm install -g webpack
npm install -g webpack-cli

热更新web服务器

1）安装插件：npm install webpack-dev-server --save-dev
2）添加启动脚本