diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..86a435fb232a4655ffb405fab2e7ea07bc2994da --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md" @@ -0,0 +1,108 @@ +## Vue.js 第五节课 (组件基础) + ++ 组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码 + +## 一、全局组件 Vue.component() + +``` +Vue.component('good',{ + template:'

good nice

' + }) +``` + +1. 设置Vue的接管范围 + +``` + + + + + Hello World + + + +
+ +
+ + + +``` + +## 二、局部组件 + +1. 先在外部声明,然后在Vue实例中实例化 +``` +var hello={ + template:'

hello world

' + } + var app=new Vue({ + el:'#app', + components:{ + hello:hello //在此处生成局部组件两个hello可以不同 + } + }) +``` + +## 二、动态组件(组件切换) + +1. 父组件向子组件传值 + ++ 传值 + ++ 里面的hiboy会传递到子组件中替代slot + +2. 子组件向父组件传值 + ++ 子组件向父组件传值主要通过向上层传递事件实现所需函数$emit(’事件名‘,值)//值可为空也可多个 + +``` + +
+ +

{{num}}

+
+ + +``` +注意:组件的data是一个函数通过返回值来实现 + +通过this.$refs.one我们可以获得ref="one"的组件以及其内的所以内容, + +this.$refs.one.number获取了组件中的number diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..b29e1d818fab48e0057b97971078a78359f8f0ca --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md" @@ -0,0 +1,16 @@ +## Vue Lci + +1. 修改linux文件权限 + +2. chmod -R 777 文件夹名/ + +3. 修改Host文件 + +4. 修改 host 权限 + +5. 右键-属性-安全-高级-更改权限-添加-选择主体-高级-立即查找-选择Administrator-保存 + +``` +// host 文件位置 +C:\Windows\System32\drivers\etc +``` \ No newline at end of file diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.11\357\274\210Vue CLI \351\203\250\347\275\262\345\210\260\346\234\215\345\212\241\345\231\250\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.11\357\274\210Vue CLI \351\203\250\347\275\262\345\210\260\346\234\215\345\212\241\345\231\250\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..26eb9ff07d80890ba2c451519017a214d51ba8ce --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.11\357\274\210Vue CLI \351\203\250\347\275\262\345\210\260\346\234\215\345\212\241\345\231\250\357\274\211.md" @@ -0,0 +1,39 @@ +## Vue CLI 部署在服务器 + +### 端口修改配置文件 +``` +module.exports = { + devServer: { + port: 5050, // 端口 + }, + lintOnSave: false // 取消 eslint 验证 +}; +``` + ++ 一些Vue命令 ++ 安装vue/cli +``` +npm install -g @vue/cli +``` +### OR +``` +yarn global add @vue/cli +更新vue/cli +``` +``` +npm update -g @vue/cli +``` +### OR +``` +yarn global upgrade --latest @vue/cli +创建vue项目 +``` +vue create myVueProject // 你的要创建Vue项目 + +cd myVueProject // 进入你的项目文件夹 + +yarn serve // 启动你的vue项目 + +yarn build // 打包你的项目,文件会保存到dist文件夹里面 + +cp -r 文件名 /位置/修改后的文件名 \ No newline at end of file diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.12\357\274\210Vue \344\275\277\347\224\250\347\273\204\344\273\266\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.12\357\274\210Vue \344\275\277\347\224\250\347\273\204\344\273\266\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..f0a4ee7813b43e2dd2c43f9655c23c99ce6cb787 --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.12\357\274\210Vue \344\275\277\347\224\250\347\273\204\344\273\266\357\274\211.md" @@ -0,0 +1,48 @@ +## Vue CLI使用组件 + +### 1. 完成Vue Cli项目部署 + +### 2. 在src-components新建Vue文件夹 + +``` + +``` ++ 注意:data返回的是一个函数 + +### 3. 在src自己创建的App.Vue里引Vue文件 +``` + + + +``` ++ 注意:在template中使用标签命名规则,以上面注册的组件为例: \ No newline at end of file diff --git "a/\346\242\201\350\211\272\347\274\244/Vue/6-8.html" "b/\346\242\201\350\211\272\347\274\244/Vue/6-8.html" new file mode 100644 index 0000000000000000000000000000000000000000..18d5f6d1287698da63d3956f93c57eb7fc20aecf --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue/6-8.html" @@ -0,0 +1,50 @@ + + + + + + + + Document + + + +
+ + + + + + + +
+ + + + + + + + + \ No newline at end of file