速成vue02-Vue的基本属性及vue项目的搭建

双向绑定

vue.js是mvvm框架,即双向数据绑定,当数据发生改变时,视图会随之发生改变,而视图发生改变时,数据也应当随之发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <div id="app">
        输入的文本为:<input type="text" v-model='message'>{{message}}
        <select v-model='select'>
            <!-- 苹果手机当下拉框第一项为空时,将无法选择,因此需要增加一个默认项 -->
            <option value="" disabled>--请选择--</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>   
        </select>
        <span>Value:{{select}}</span>
    </div>
<script src="https://blog.51cto.com/js/vue.js"></script> 
<script>
        var vm = new Vue({
        el:"#app",
        data:{
            message:'',
            select:'',  
        },
    })
</script>
</body>
</html>

组件

组件vuejs和vue的区别是可复用的Vue实例,即自定义标签,通过数据绑定,实现参数传递问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <test v-for= "total in totals" v-bind:item="total"></test>
</div>
<script src="https://blog.51cto.com/js/vue.js"></script>   
<script>
    Vue.component("test",{
        props: ['item'],
        template: '<li>{{item.text}}</li>'
    })
    var vm = new Vue({
        el:"#app",
        data:{
            totals:[
                {text:'学习'},
                {text:'Vue'},
                {text:'组件'}
        ]  
    },
    })
</script>
</body>
</html>

Axions异步通信

获取数据

var vm = new Vue({
	el:"#vue",
	mounted(){		//钩子函数
		axios.get('json文件').then(response=>(得到数据后将发生的事))
}
})

javascript回数据

<div id="vue">
    <div>
        {{info.name}}
    </div>
    <a v-bind:href="https://blog.51cto.com/u_15489116/4942523/info.url"></a>
</div>
var vm = new Vue({
	el:"#vue",
	data(){
		return{
			info:{}
			}
		}
	mounted(){		//钩子函数
		axios.get('json文件').then(response=>(this.info=response.data))
}
})

计算属性

能够将计算结果缓存

调用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <p>
        {{dataTime()}}
    </p>
  <!-- 此时将会输出一个时间戳 -->
</div>
<script src="https://blog.51cto.com/js/vue.js"></script>   
<script>
    var vm = new Vue({
        el:"#app",
   		methods:{
            dataTime:function(){
                return Date.now()
            },
        },
        computed:{
        	dataTime:fucntion(){
        		return Date.noe()
    }
    }
    })
    //methods和computed的区别在于一个是属性,一个是方法
</script>
</body>
</html>

计算属性的特点:将不经常变化的计算结果进行缓存,节约开销

solt

插槽,在封装的标签中留下数据插口,便于数据的动态插入,新版Vue已经使用v-solt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <test>
        <test-title slot="test-title" :title="title"></test-title>
        <test-titles slot="test-titles" v-for="iteam in iteams" :iteam="iteam"></test-titles>
    </test>
</div>
<script src="https://blog.51cto.com/js/vue.js"></script>   
<script>
    Vue.component("test",{
        template: '<div>\
                        <slot name="test-title"></slot>\
                        <ul>\
                            <slot name="test-titles"></slot>\
                        </ul>\
                   </div>'
    })
    Vue.component("test-title",{
        props:['title'],
        template:'<div>{{title}}</div>'
    })
    Vue.component("test-titles",{
        props:['iteam'],
        template:'<li>{{iteam}}</li>'
    })
    var vm = new Vue({
        el:"#app",
        data:{
            title:"一个尝试",
            iteams:['幸苦','测试','心累']
        },
   		methods:{
            dataTime:function(){
                return 15
            },
        }
    })
</script>
</body>
</html>

删除元素

splice()

js删除数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <test>
        <test-title slot="test-title" :title="title"></test-title>
        <!-- 双引号中的数据是对象的数据 -->
        <test-titles slot="test-titles" v-for="(iteam,index) in iteams" :iteam="iteam" :index="index" v-on:remove="removed(index)"></test-titles>
    </test>
</div>
<script src="https://blog.51cto.com/js/vue.js"></script>   
<script>
    Vue.component("test",{
        template: '<div>\
                        <slot name="test-title"></slot>\
                        <ul>\
                            <slot name="test-titles"></slot>\
                        </ul>\
                   </div>'
    })
    Vue.component("test-title",{
        props:['title'],
        template:'<div>{{title}}</div>'
    })
    Vue.component("test-titles",{
        props:['iteam','index'],
        template:'<li>{{iteam}} <button @click="remove">删除</button></li>',
        methods:{
            remove:function(index){
                this.$emit('remove',index)  //子组件通过$emit触发父组件的自定义事件,父组件通过props将数据传递给子组件
            }
        }
    })
    var vm = new Vue({
        el:"#app",
        data:{
            title:"一个尝试",
            iteams:['幸苦','测试','心累']
        },
   		methods:{
            dataTime:function(){
                return 15
            },
            removed:function(index){
                this.iteams.splice(index,1)
            }
        }
    })
</script>
</body>
</html>

vue-cli

是官方提供的一个脚手架,用于快速生成一个vue的项目模板

主要功能:

  1. 统一的目录结构
  2. 本地调试
  3. 热部署
  4. 单元测试
  5. 集成打包上线

创建一个Vue项目

超详细博客

vue init webpack hello-vue(项目名)

Webp数据废土ack

什么是Webpack

是一个js的静态模块打包器,会递归地构建一个依赖关系图

建议多看几次

Vue:v数据漫游uhtml文件怎么打开e-routvue.js论文er路由

是vue的官方路由器,配置方式

建议多看几次