Vue | (三)使用Vue脚手架(上) | 尚硅谷Vue2.0+Vue3.0全套教程

时间:2024-02-20 13:34:28
  • plugins.js
    export default {
    	install(Vue,x,y,z){
    		console.log(x,y,z)
    		//全局过滤器
    		Vue.filter('mySlice',function(value){
    			return value.slice(0,4)
    		})
    
    		//定义全局指令
    		Vue.directive('fbind',{
    			//指令与元素成功绑定时(一上来)
    			bind(element,binding){
    				element.value = binding.value
    			},
    			//指令所在元素被插入页面时
    			inserted(element,binding){// eslint-disable-line no-unused-vars
    				element.focus()
    			},
    			//指令所在的模板被重新解析时
    			update(element,binding){
    				element.value = binding.value
    			}
    		})
    
    		//定义混入
    		Vue.mixin({
    			data() {
    				return {
    					x:100,
    					y:200
    				}
    			},
    		})
    
    		//给Vue原型上添加一个方法(vm和vc就都能用了)
    		Vue.prototype.hello = ()=>{alert('你好啊')}
    	}
    }
    
  • Student.Test.vue
    <template>
    	<div>
    		<h2>学生姓名:{{name}}</h2>
    		<h2>学生性别:{{sex}}</h2>
    		<input type="text" v-fbind:value="name">
    	</div>
    </template>
    
    <script>
    	export default {
    		name:'Student-Test',
    		data() {
    			return {
    				name:'lala',
    				sex:'女'
    			}
    		},
    	}
    </script>
    
  • School-Test.vue
    <template>
    	<div>
    		<h2>学校名称:{{name | mySlice}}</h2>
    		<h2>学校地址:{{address}}</h2>
    		<button @click="test">点我测试一个hello方法</button>
    	</div>
    </template>
    
    <script>
    	export default {
    		name:'School-Test',
    		data() {
    			return {
    				name:'尚硅谷12345',
    				address:'北京',
    			}
    		},
    		methods: {
    			test(){
    				this.hello()
    			}
    		},
    	}
    </script>
    
  • App.vue 同上。
  • main.js
    //引入Vue
    import Vue from 'vue'
    //引入App
    import App from './App.vue'
    //引入插件
    import plugins from './plugins'
    //关闭Vue的生产提示
    Vue.config.productionTip = false
    
    //应用(使用)插件
    Vue.use(plugins,1,2,3)
    //创建vm
    new Vue({
    	el:'#app',
    	render: h => h(App)
    })