Vue技术教程（2023-1-7）

最新推荐文章于 2024-10-05 01:22:45 发布

~风淡~

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量65

点赞数

分类专栏： HTML 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_66274152/article/details/128598219

版权

HTML 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

第一章：Vue概述

1.hello World

Vue：易学易用 性能出色 适用场景丰富的web前端框架

vue是一款构建用户界面的JavaScript框架 它基于标准的html css JavaScript构建  并提供了一种声明式 组件化的编程模型 帮助你高效的开发 用户界面 无论是简单还是复杂的页面 vue都可以胜任

vue特点：组件化开发  声明式的编程（命令行的方式）

2.hello  Vue的书写
		方式一：在网页中直接使用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.引入Vue-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>


<div id="root"></div>

<script>

<!--2.编写vue代码-->


//在写vue的时候一切皆组件
/*1.：创建一个根组件  在vue3中组件就是一个普通的js对象
* */

//1.创建一个vue组件
const Root={

    template:"<h1>你好  Vue！</h1>"//这个就是模板样式在  希望在页面中呈现的样子

};//在使用过程中组件用来创建组件实例 组件是组件实例的模板  组件->组件生成组件实例->虚拟dom->dom(在页面中呈现)

//2.创建一个App实例（应用实例）

const app=Vue.createApp(Root)


//3.将实例在页面中挂载
app.mount("#root")



</script>
</body>
</html>

2.data函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--1.引入Vue-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>


<div id="root"></div>

<script>

  <!--2.编写vue代码-->


  //在写vue的时候一切皆组件
  /*1.：创建一个根组件  在vue3中组件就是一个普通的js对象
  * */

  //1.创建一个vue组件
  const Root={
    data(){
    //在这里书写一个data  注意：data是一个函数 需要一个对象作为返回值
      return{
        message:"Vue 计算机科学与技术学院",  //data方法返回的对象 其中的属性会自动添加到组件的实例中
        button:"我是计算机科学与技术学院按钮"
      }
    },
    //在模板中科院直接访问组件实例中的属性
    //在模板中使用插值语法  {{属性名}} 来访问组件实例中属性
    template:"<h1>你好  Vue！{{message}} , {{button}}</h1>"//这个就是模板样式在  希望在页面中呈现的样子
  };//在使用过程中组件用来创建组件实例 组件是组件实例的模板  组件->组件生成组件实例->虚拟dom->dom(在页面中呈现)

  //2.创建一个App实例（应用实例）

  const app=Vue.createApp(Root)

  //3.将实例在页面中挂载
  app.mount("#root")
</script>
</body>
</html>

3.按钮练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--1.引入Vue-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>


<div id="root"></div>

<script>
<!--组件是用来创建组件实例-->


  //练习：创建按钮  点击按钮时 显示按钮点击的时间
  const Root={
    data(){
      return{

        //定义一个变量 记录点击次数
        //data中的数据湖自动和使用它的视图绑定 数据发生变化视图会自动刷新
        count:0,

        message:"Vue 计算机科学与技术学院",

      }

    },

    template:" <button @click='count++'>点我一下</button> --点了{{count}}次"


  };



  const app=Vue.createApp(Root)
  //3.将实例在页面中挂载
  app.mount("#root")



</script>
</body>
</html>

4.模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--1.引入Vue-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>


<div id="root">

<!--  方式二：如果追定义在网页中 此时模板必须符合html的规范

如果我们在组件中定义template 则会优先使用template作为模板 同时根元素中的所有内容都会被替换
如果在组件中没有定义template 则会使用根元素innerHtml作为模板使用
-->
  <button @click='count++'>点我一下</button> --点了{{count}}次
<p>我是{{count}}</p>
</div>

<script>
  const Root={
    data(){
      return{
        count:0,
        message:"Vue 计算机科学与技术学院",
      }
    },
    //template是模板  它决定了组件最终的样子
    //定义模板的方式有三种 1.在组件中通过template属性去指定  2.直接在网页的根元素中指定
    // 方式一： template:" <button @click='count++'>点我一下</button> --点了{{count}}次"

  //方式三：使用render()函数直接渲染
  };



  const app=Vue.createApp(Root)
  //3.将实例在页面中挂载
  app.mount("#root")



</script>
</body>
</html>

6.使用构建工具去书写Vue

1.打开终端 初始化项目 npm init -y

2.安装vite依赖：npm add -D vite
2.安装vue依赖 ：npm add vue


第一步创建html页面：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue 计算机科学与技术学院！</title>
    <script type="module" src="./src/index.js"></script>

</head>
<body>

<div id="app"></div>
</body>
</html>


//引入vue  这里引入的vue不支持template属性来设置模板
import {createApp} from "vue/dist/vue.esm-bundler.js";


//创建一个根组件
const App={

    data(){

        return{
            message:"计算机科学与技术学院欢迎你！"

        }
    },
    template:"<h1>{{message}}</h1>"

}

//创建应用挂载组件到页面
createApp(App).mount("#app")



1.直接在网页中使用：//引入vue  这里引入的vue不支持template属性来设置模板
import {createApp} from "vue/dist/vue.esm-bundler.js";

2.使用vite npm add vite -D
3.代码：
		//组件：就是一个普通的js对象

const App={}


//创建应用
const app=createApp(App)

//挂载到页面
app.mount("#root")

第二章：组件化编程

1.Vue组件化

html页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算机科学与技术学院</title>
    <script type="module" src="./src/index.js"></script>

</head>
<body>
<div id="root"></div>
</body>
</html>

index程序入口代码：
import {createApp} from "vue/dist/vue.esm-bundler.js";
import App from "../../1.helloVue/src/App";
//创建应用并挂载
//mount（）的返回值是根组件的实例
const vm=createApp(App).mount("#root")

子组件App代码：
/*
* 使用组件：
*
*       --1.引入组件
* */
import MyButton from "../../2.helloVue/src/MyButton";


//2.在组件中注册子组件
export default
//创建与根组件
{
    data(){
        return{
            msg:"计算机科学与技术学院",
            count:0
        }

    },

    //2.在这里使用  就在这里注册组件  注册组件使用components注册

    components:{
        MyButton:MyButton//属性名：属性值

    },

    template:'<h1>{{msg}}</h1>' +
        '<button @click="count++">点我一下{{count}}</button>' +
        '<h1>{{count}}</h1>' +
        '<h2>{{count}}</h2>' +
        '<MyButton></MyButton>' +
        '<MyButton></MyButton>'
//组件与组件之间是互不影响的
}

子组件MyButton代码：
/*封装一个自定义的按钮组件
*
* */

export default {

    data(){

        return{

            count:0
        }
    },
    template:'<button @click="count++">{{count}}</button>'
}

2.单文件组件

当前template是用字符串的形式去编写模板  1.这些字符串会在项目运行时 在浏览器中会被编译为js的函数(性能不太好)
				2.在字符串中编写代码 体验感差
				
	为了我解决这种问题  vue为我们提供了一种单文件组件  单文件组件的格式就是vue  后缀名为vue
	在Vscode中要装 Vue language Features插件
	vue文件用来编写单文件组件 vue本省不能被浏览器识别  所以要用构建工具打包才可以使用
		同时vue文件在打包时 构建工具会直接将template替换为函数 无需再浏览器中中去编译 
		
		要想使用 需要安装插件：终端输入：npm add -D @vitejs/plugin-vue
		开始配置 vite.config.js文件
		
		
		vue.vue组件代码：
			<template>



<!--  在这里书写模板-->
  <h1>{{msg}}</h1>

</template>

<script>

/*在script标签里面可以编写组件的代码
*
* */
export default {
  data(){

    return{
      msg:"计算机科学与技术欢迎你！"

    }

  }
}
</script>

<style scoped>

</style>


App.js代码：
/*
* 使用组件：
*
*       --1.引入组件
* */
import MyButton from "../../2.helloVue/src/MyButton";
import vue from "../../2.helloVue/src/vue";

//2.在组件中注册子组件
export default
//创建与根组件
{
    data(){
        return{
            msg:"计算机科学与技术学院",
            count:0
        }

    },

    //2.在这里使用  就在这里注册组件  注册组件使用components注册

    components:{
        MyButton:MyButton,//属性名：属性值
        Vue:vue

    },

    template:'<h1>{{msg}}</h1>' +
        '<button @click="count++">点我一下{{count}}</button>' +
        '<h1>{{count}}</h1>' +
        '<h2>{{count}}</h2>' +
        '<MyButton></MyButton>' +
        '<MyButton></MyButton>' +
        '<Vue></Vue>'
//组件与组件之间是互不影响的
}


index.js组件代码：
	import {createApp} from "vue/dist/vue.esm-bundler.js";
// import App from "../../1.helloVue/src/App";
import vue from "./vue";
//创建应用并挂载
//mount（）的返回值是根组件的实例
const vm=createApp(App).mount("#root")

 
 
 vite.config.js配置文件：
             import vue from "@vitejs/plugin-vue";
            export default {

                plugin:[vue()]
            }

3.自动创建项目


每次手动创建项目会很麻烦：因此我们使用自动工具来创建：
		命令：npm create vue
				npm init vue@latest(推荐)
选择完成后  自动创建完成vue项目

~风淡~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录