目录

前置知识JavaScript-导入导出

 入门操作

变量渲染页面 

局部使用vue的实现步骤

vue指令 

v-for

v-bind 

v-if

v-show

v-on 

v-model 

 生命周期

前置知识JavaScript-导入导出

正常情况在html导入js文件是全部导入，这样会导致性能上的损失 。

JS提供的导入导出机制,可以实现按需导入

 入门操作

变量渲染页面 

 使用vue将变量内容渲染到页面

                    
{{msg}}
                 import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' //导入vue        //创建vue实例        createApp({            data(){                return { msg:"hello vue3"}            }        }).mount("#app") //链式方法 传入p的id值        

局部使用vue的实现步骤

准备工作 

• 引入Vue模块
• 创建Vue的应用实例
• 定义元素(p)，交给Vue控制

  构建用户界面

  • 准备数据
  • 用插值表达式渲染 

    vue指令 

    指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。 

    v-for

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

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

    参数说明：

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

      案例实现 

                  Document            

      文章标题	分类	发表时间	状态	操作
      {{i.title}}	{{i.category}}	{{i.time}}	{{i.state}}	编辑 删除

      //导入vue模块 import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' //创建应用实例 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")//控制页面元素

              遍历的数组，必须在data中定义； 要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。 

      v-bind 

      • 作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
      • 语法：v-bind:属性名="属性值"
      • 简化语法：:属性名="属性值"

        用于将变量绑定到标签属性中 

                    Document            百度                //引入vue模块        import { createApp} from                 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'        //创建vue应用实例        createApp({            data() {                return {                    //定义数据                    url:"https://www.baidu.com"                                    }            }        }).mount("#app")//控制html元素    

         v-bind所绑定的数据，必须在data中定义 。

        v-if

        v-if

        • 作用：用来控制元素的显示与隐藏
        • 语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
        • 其它：可以配合 v-else-if / v-else 进行链式调用条件判断
        • 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
        • 场景：要么显示，要么不显示，不频繁切换的场景 

                      Document            手链价格为:  =0 && customer.level19.9                     19.9">29.9                //导入vue模块        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'        //创建vue应用实例        createApp({            data() {                return {                    //定义消费数据                    customer:{                        name:"小王",                        level:10                    }                }            }        }).mount("#app")//控制html元素    

          v-show

          • 作用：用来控制元素的显示与隐藏
          • 语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
          • 原理：基于CSS样式display来控制显示与隐藏
          • 场景：频繁切换显示隐藏的场景 

            v-if  与 v-show的区别 

            • v-if 是根据条件判断是创建还是移除元素节点（条件渲染）。
            • v-show 是根据css样式display来控制元素的显示与隐藏 。 

              v-if 与 v-show的适用场景

              • v-if 适用于显示与隐藏切换不频繁的场景 。
              • v-show 适用于显示与隐藏切换频繁的场景 。 

                v-on 

                • 作用：为html标签绑定事件
                • 语法： v-on:事件名="函数名"
                • 简写为  @事件名="函数名" 
                • 函数需要定义在methods选项内部

                  createApp({ data(){需要用到的数据}, methods:{需要用到的方法} }) 

                              Document            点我          再点我                //导入vue模块        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'        //创建vue应用实例        createApp({            data() {                return {                    //定义数据                }            },            methods:{                ok1:function(){                    alert("你很帅")                },                ok2:function(){                    alert("我承认，你真的很帅")                }            }        }).mount("#app");//控制html元素    

                  v-model 

                  • 作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
                  • 语法：v-model="变量名" 
                  • v-model 中绑定的变量，必须在data中定义。

                    给表单元素使用实现双向数据绑定,数据发生变化视图也会跟着变化

                                Document            文章分类:  {{searchconditions.category}}        发布状态:  {{searchconditions.state}}        搜索        重置        
                    
                    

                    文章标题	分类	发表时间	状态	操作
                    {{article.title}}	{{article.category}}	{{article.time}}	{{article.state}}	编辑 删除

                    //导入vue模块 import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' //创建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 = '' } } }).mount("#app")//控制html元素

                     

                     生命周期

                    • 生命周期：指一个对象从创建到销毁的整个过程。
                    • 生命周期的八个阶段：每个阶段会自动执行一个生命周期方法(钩子), 让开发者有机会在特定的阶段执行自己的代码 
                    • 在页面加载完毕时，发起异步请求，加载数据，渲染页面。