Vue3入门学习-day01-CSDN博客

本文链接：https://blog.csdn.net/ITisit1/article/details/135326845

1.快速入门

vue3使用cdn方式引入的使用方式

<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script> 
<div id="app">
        <h1>{{msg}}</h1>
    </div>
<!-- 引入vue模块 -->
<script type="module">
    /* 创建vue的应用实例 */
    Vue.createApp({
        data(){
            return {
                //定义数据
                msg: 'hello vue3'
            }
        }
    }).mount("#app");
</script>

2.vue3指令

v-for

作用：列表渲染，遍历容器的元素或者对象的属性

语法： v-for = “(item,index) in items”

参数说明：

items 为遍历的数组
item 为遍历出来的元素
index 为索引/下标，从0开始；可以省略，省略index语法： v-for = “item in items”

<div id="app">
    <table border="1 solid" colspa="0" cellspacing="0">
        <tr>
            <th>文章标题</th>
            <th>分类</th>
            <th>发表时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="(article,index) in articleList">
            <td>{{article.title}}</td>
            <td>{{article.category}}</td>
            <td>{{article.time}}</td>
            <td>{{article.state}}</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
    </table>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                articleList:[{
                    title:"医疗反腐绝非砍医护收入",
                    category:"时事",
                    time:"2023-09-5",
                    state:"已发布"
                },
                    {
                        title:"中国男篮缘何一败涂地？",
                        category:"篮球",
                        time:"2023-09-5",
                        state:"草稿"
                    },
                    {
                        title:"华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                        category:"旅游",
                        time:"2023-09-5",
                        state:"已发布"
                    }]
            }
            }
    }).mount("#app");
</script>

v-bind

 <a v-bind:href="url">百度官网</a>
    <!--简写形式-->
    <a :href="url">百度官网</a>
    <script>
        Vue.createApp({
            data() {
                return {
                   url: 'https://www.baidu.com'
                }
            }
        }).mount("#app");
    </script>

v-if和v-show

v-if主要是用来基于条件判断，来控制创建或移除元素节点（条件渲染），他的特点是要么显示，要么不显示，不频繁切换的场景

v-show主要是基于CSS样式display来控制显示与隐藏，如果需要频繁切换显示隐藏的场景时候使用

<div id="#app">
    手链价格为:  <span v-if="customer.level>=0 && customer.level<=1">9.9</span>
	<span v-else-if="customer.level>=2 && customer.level<=4">19.9</span>
	<span v-else>29.9</span>
	<br/>
	手链价格为:  <span v-show="customer.level>=0 && customer.level<=1">9.9</span>
	<span v-show="customer.level>=2 && customer.level<=4">19.9</span>
	<span v-show="customer.level>=5">29.9</span>
</div>
<script type="module">
        //创建vue应用实例
        Vue.createApp({
            data() {
                return {
                    customer:{
                        name:'张三',
                        level:2
                    }
                }
            }
        }).mount("#app")//控制html元素
</script>

v-on点击事件

点我有惊喜

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数

  文章分类: <input type="text" v-model="searchConditions.category"/> <span>{{searchConditions.category}}</span>
    发布状态: <input type="text" v-model="searchConditions.state"/> <span>{{searchConditions.state}}</span>
    <script type="module">
        /* 创建vue的应用实例 */
        Vue.createApp({
            data() {
                return {
                    searchConditions:{
                        category:'',
                        state:''
                    },
                    articleList:[{
                         title:"医疗反腐绝非砍医护收入",
                         category:"时事",
                         time:"2023-09-5",
                         state:"已发布"
                     },
                         {
                             title:"中国男篮缘何一败涂地？",
                             category:"篮球",
                             time:"2023-09-5",
                             state:"草稿"
                         },
                         {
                             title:"华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                             category:"旅游",
                             time:"2023-09-5",
                             state:"已发布"
                         }],
                }
            },
            methods: {
                clear:function(){
                    //清空category以及state的数据
                    //在methods对应的方法里面,使用this就代表的是vue实例,可以使用this获取到vue实例中准备的数据
                    this.searchConditions.category='';
                    this.searchConditions.state='';
                }
            },
            mounted:function(){
            console.log('Vue挂载完毕,发送请求获取数据')
        }
        }).mount("#app");
    </script>

3.Vue生命周期

created和mounted的区别

created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成识图。
mounted：在模板渲染成html后调用，通常初始化页面完成后，再对html的dom节点进行一些需要的操作。

Axios

介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。

官网：https://www.axios-http.cn

<!-- 引入axios的js文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  /* 发送请求 */
  axios({
      method:'get',
      url:'http://localhost:8080/article/getAll'
  }).then(result=>{
      //成功的回调
      //result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
      console.log(result.data);
  }).catch(err=>{
      //失败的回调
      console.log(err);
  });
  let article = {
    title: '明天会更好',
    category: '生活',
    time: '2000-01-01',
    state: '草稿'
  }
  /*  axios({
       method:'post',
       url:'http://localhost:8080/article/add',
       data:article
   }).then(result=>{
       //成功的回调
       //result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
       console.log(result.data);
   }).catch(err=>{
       //失败的回调
       console.log(err);
   }); 

  //别名的方式发送请求
  /* axios.get('http://localhost:8080/article/getAll').then(result => {
      //成功的回调
      //result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
      console.log(result.data);
  }).catch(err => {
      //失败的回调
      console.log(err);
  }); */
  axios.post('http://localhost:8080/article/add', article).then(result => {
    //成功的回调
    //result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
    console.log(result.data);
  }).catch(err => {
    //失败的回调
    console.log(err);
  });
</script>

4.Vue工程化

Vue项目-创建

由于 npm 安装速度慢，此处使用了淘宝的镜像及其命令 cnpm

# 查看版本
$ npm -v
#升级 npm
cnpm install npm -g
# 升级或安装 cnpm
npm install cnpm -g

创建一个工程化的Vue项目，执行命令：npm init vue@latest

Project name：------------------》项目名称，默认值：vue-project，可输入想要的项目名称。
Add TypeScript? ----------------》是否加入TypeScript组件？默认值：No。
Add JSX Support? ---------------》是否加入JSX支持？默认值：No。
Add Vue Router …--------------》是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
Add Pinia …-------------------》是否添加Pinia组件来进行状态管理？默认值：No。
Add Vitest …------------------》是否添加Vitest来进行单元测试？默认值：No。
Add an End-to-End …-----------》是否添加端到端测试？默认值No。
Add ESLint for code quality? —》是否添加ESLint来进行代码质量检查？默认值：No

执行上述指令，将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具

Vue项目-安装依赖

进入项目目录，执行命令安装当前项目的依赖：npm install
执行完成之后然后再执行npm run dev执行完成之后访问 http://localhost:5173/可以看到如下页面，说明项目配置成功
在这里插入图片描述