Vue2+Vue3笔记(尚硅谷张天禹老师)day02

声明:只是记录,初心是为了让页面更好看,会有错误,我并不是一个会记录的人,所以有点杂乱无章的感觉,我先花点时间把视频迅速过掉,再来整理这些杂乱无章的内容

组件化编程

按照视频来的话,这里应该有一些概念的东西,但我不管这些东西,我这里只做一个浅显得记录

  1. 组件:实现局部功能效果的代码,复用编码,简化开发
  2. 模块:提供特定功能的js程序,这样可以提高复用性,简化开发
  3. 模块化: 都是以模块来编写的
  4. 组件化:都是以组件来编写的

Vue中使用组件的三大步骤

  1. 定义组件
    使用Vue.extend创建,注意点
  • el不要写,因为组件都受vm的管理,由vm中的el决定服务哪个容器
  • data必须写成函数,要不然组件复用的时候,组件a改了数据,那组件b存储的数据也发生了改变,但我们本意只想改变a,写成函数的话可以保证每次返回的都是一个新的值
  1. 注册组件
  • 局部注册:new Vue的时候传入compoents选项
  • 全局注册:靠Vue.component(‘组件名’,组件)
  1. 使用组件
    这个特别简单,如果组件名叫做demo,那么直接写上即可

非单文件组件

这个基本上不用,一般是作为过渡的,不得不说这个template没有提示是真的烦

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="root">
        <student>student>
        <school>school>
        <common>common>
    div>
    
     
    <script src="../../js/vue.js">script>
    <script type="text/javascript">
        
       //①
        const student = Vue.extend({
        	name:'andong',//指定开发者工具中呈现的名字
            template:
                `
                

姓名:{{name}}

年龄:{{age}}


`
, data() { return { name: '王矽疑', age: 19 } } }) // 局部 const school = Vue.extend({ template: `

学校:{{name}}

地址:{{address}}

校龄{{age}}


`
, data() { return { name: '安东大', address: '安天', age: 200 } } }) //② const common = Vue.extend({ template:`

我是全局组件 a的值是{{a}}


`
, data(){ return {a:10} }, methods: { change(){ this.a++; } }, }) //注册全局组件 // 单引号里面的内容是组件名字,这个任意取,但要见名知义 // 第二个参数是组件的位置(说成变量更好理解点) 名字要和②处定义的保持一致 Vue.component('common',common) new Vue({ el: "#root", components: { // 完整的是student:student,但由于键与值一样,只写一个也可以 //冒号之前的是组件名(若其没有name属性那么这个可以随便写,但是名字最好见名知意) //冒号之后的是变量名,和①处保持一致 student, school } })
script> body> html>

VueComponent

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>VueComponenttitle>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		
		<div id="root">
			<school>school>
			<hello>hello>
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				

学校名称:{{name}}

学校地址:{{address}}

`
, data(){ return { name:'尚硅谷', address:'北京' } }, methods: { showName(){ console.log('showName',this) } }, }) const test = Vue.extend({ template:`atguigu` }) //定义hello组件 const hello = Vue.extend({ template:`

{{msg}}

`
, data(){ return { msg:'你好啊!' } }, components:{test} }) // console.log('@',school) // console.log('#',hello) //创建vm const vm = new Vue({ el:'#root', components:{school,hello} })
script> html>

单文件组件

你可能感兴趣的:(Vue,笔记,vue.js,javascript)