浅入VUE

浅入VUE

v-bind: —— 数据绑定，缩写为 ‘:’

		<div id="app1">
		    <span v-bind:title="message">
		        悬停
		    </span>
		</div>
		
		<script src="js/vue.min.js"></script>
		<script>
		    var vm = new Vue({
		        el: "#app",
		        //Model : 数据
		        data: {
		            message: "hello Vue!"
		        }
		    });
		
		    var vm1 = new Vue({
		        el: "#app1",
		        //Model : 数据
		        data: {
		            message: "hello Vue!"
		        }
		    });
		</script>

v-for —— 循环语句

		<div id="app">
		    <li v-for="(item, index) in items">
		        {{item.message}} -- {{index}}
		    </li>
		</div>
		
		<script src="js/vue.min.js"></script>
		<script>
		    var vm = new Vue({
		        el: "#app",
		        data: {
		            items: [
		                {message: '123'},
		                {message: 'zouzou3'},
		                {message: 'zouzou2'},
		                {message: 'zouzou1'},
		                {message: 'zouzou'}
		            ]
		        }
		    });
		</script>

v-if —— 条件分支语句

		<div id="app">
		<!--    <h1 v-if="ok">Yes</h1>-->
		<!--    <h1 v-else>No</h1>-->
		    <h1 v-if="type==='A'">A</h1>
		    <h1 v-else-if="type==='B'">B</h1>
		    <h1 v-else>C</h1>
		</div>
		
		<script src="js/vue.min.js"></script>
		<script>
		    var vm = new Vue({
		        el: "#app",
		        //Model : 数据
		        data: {
		            // ok: true
		            type: 'A'
		        }
		    });
		</script>

v-on: —— 绑定事件，缩写 ‘@’

		<div id="app">
		    <button v-on:click="sayHi()">click me</button>
		</div>
		
		<script src="js/vue.min.js"></script>
		<script>
		    var vm = new Vue({
		        el: "#app",
		        data: {
		            message: "zouzou"
		        },
		        methods: {  // 方法必须定义在methods中,v-on： 事件
		            sayHi: function (event) {
		                alert(this.message);
		            }
		        }
		    });
		</script>

v-model —— 数据双向绑定

		<div id="app">
		<!--    <input type="text" v-model="message"><br>-->
		<!--    <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>-->
		<!--    {{message}}-->
		<!--    <input type="radio" name="sex" value="男" v-model="qinjiang">男-->
		<!--    <input type="radio" name="sex" value="女" v-model="qinjiang">女 <br>-->
		<!--    选中了： {{qinjiang}}-->
		    <select name="" id="" v-model="selected">
		        <option value="" disabled>请选择</option>
		        <option value="A">A</option>
		        <option value="B">B</option>
		        <option value="C">C</option>
		    </select> <br>
		    {{selected}}
		</div>
		
		<script src="js/vue.min.js"></script>
		<script>
		    var vm = new Vue({
		        el: "#app",
		        data: {
		            // message: "123"
		            // qinjiang: ''
		            selected: ''
		        }
		    });
		</script>

组件

		<div id="app">
		<!--    组件： 传递给组件的值； props参数接收-->
		    <qinjia v-for="item in items" v-bind:qin="item"></qinjia>
		</div>
		
		<script src="js/vue.min.js"></script>
		<script>
		    // 定义一个vue组件
		    Vue.component("qinjia",{
		        props: ['qin'],
		        template: '<li>{{qin}}</li>'
		    });
		
		    var vm = new Vue({
		        el: "#app",
		        data: {
		            items: ["java", "Linux", "HTML"]
		        }
		    });
		</script>

axios传输数据

<div id="vue" v-clock>
    <div>{{info.name}}</div>
    <a v-bind:href="info.url">点我</a>
</div>

<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
       el: "#vue",
        data() {
            return{
                // 请求的放回参数格式必须和json字符串一样。
                info: {
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null,
                }
            }
        },
        mounted(){ // 钩子函数 链式编程
           axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>

计算属性

		<div id="vue">
		    <p>currentTime1：{{currentTime1()}}</p>
		    <p>currentTime2：{{currentTime2}}</p>
		</div>
		
		<script src="js/vue.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript">
		    var vm = new Vue({
		        el: "#vue",
		        data: {
		            message: "Hello zou",
		        },
		        methods: {
		            currentTime1: function (event) {
		                return Date.now(); // 返回一个时间戳
		            }
		        },
		        computed: { // 计算属性：method，compute  重名后，methods优先级更高
		            currentTime2: function (event) {
		                return Date.now(); // 返回一个时间戳
		            }
		        }
		    });
		</script>

定义插槽

		<div id="vue">
		    <todo>
		<!--        vi-bind: 简写为 ':'   -->
		        <todo-title slot="todo-title" :title="title"></todo-title>
		        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item"
		                    :index="index" @remove="removeItems(index)"></todo-items>
		    </todo>
		</div>
		
		<script src="js/vue.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript">
		
		    // slot定义插槽
		    Vue.component("todo",{
		        template:
		            '<div>\
		                <slot name="todo-title"></slot>\
		                <ul>\
		                    <slot name="todo-items"></slot>\
		                </ul>\
		            </div>'
		    });
		
		    Vue.component('todo-title', {
		        props: ['title'],
		       template: '<div>{{title}}</div>'
		    });
		
		    Vue.component('todo-items', {
		        props: ['item','index'],
		        // 只能绑定当前组件的方法
		        template: '<li>{{item}} <button @click="remove">删除</button></li>',
		        methods: {
		            remove : function (index) {
		                // 调用自定义方法函数 this.$emit(函数名称，参数)
		                this.$emit('remove',index);
		            }
		        }
		    });
		
		    var vm = new Vue({
		        el: "#vue",
		        data: {
		            title: '啦啦啦',
		            todoItems: ['Java', 'JQ', 'Vue']
		        },
		        methods: {
		            removeItems: function (index) {
		                this.todoItems.splice(index,1) // 一次删除一个元素
		            }
		        }
		    });
		</script>

配置路由

		import Vue from 'vue';
		import Router from "vue-router";
		import main from '../views/main';
		import Login from "../views/Login";
		import UserList from "../views/user/List";
		import UserProfile from "../views/user/Profire";
		import NotFound from "../views/NotFound";
		
		Vue.use(Router);
		
		export default new Router({
		  mode: 'history',
		  routes: [
		    {
		      path: '/login',
		      component: Login
		    },
		
		    {
		      path: '/main',
		      component: main,
		      //嵌套路由
		      children: [
		        {
		          path: '/user/profile',
		          name: 'UserProfile',
		          component: UserProfile
		        },
		        { path: '/user/list/:id', name: 'UserList', component: UserList, props: true }
		      ]
		    },{
		      path: '/goHome',
		      redirect: '/main'
		    },{
		      path: '*',
		      component: NotFound
		    }
		  ]
		});