• 初识Vue，走进Vue的世界

    一、Vue简介

    1.Vue是什么?
     

    一套用于构建用户界面的渐 进式JavaScript框架
    渐 进式：Vue可以自底向.上逐层的应用

    2 .Vue的特点


    1.采用组件化模式，提高代码复用率、且让代码更好维护。
    2.声明式编码，让编码人员无需直接操作DOM,提高开发效率。

    3.Vue的工作流程

    • .想让Vue工作，就必须创建个Vue实例， 且要传入一个配置对 象;
    • . 容器里的代码被称为[Vue模板] ;
    • .Vue实例和容器是对应的:
    • .真实开发中只有一个Vue实例， 并且会配合着组件一起使用;
    • .{{xxx}}中的xx要写js表达式，且xxx 可以自动读取到data中的所有属性;
    • .且data中的数据发生改变， 那么页面中用到该 数据的地方也会自动更新:
    • 注意区分: js表达式和js代码(语句)
    1. 表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方:
    2. .js代码(语句)
    3. (1). if(){}  (2). for(){}
    1. 初始化一个简单的Vue实例
    2. <body>
    3.     
    4.     <div id="root">
    5.         <h1>你好，{{name}}h1>
    6.     div>
    7.     <script>
    8.         //设置为 false 以阻止 vue 在启动时生成生产提示。2.2.0 新增
    9.         Vue.config.productionTip = false
    10.         const x = new Vue({
    11.             el: '#root', //el用于指定当前Vue实列为那个容器服务，值通常为css选择器字符串
    12.             data: { //data用于存储数据，数据供el指定的容器使用
    13.                 name: 'good123'
    14.             }
    15.         })
    16.     script>
    17. body>

    4.Vue模板语法有2大类


    1.插值语法:
    功能:用于解析标签体内容。
    写法: {{xxx}}, xx是js表达式，且可以直接读取到data中的所有属性。
    2.指令语法:
    功能:用于解析标签
    举例: v-bind:href="xxx" 或简写为 :href="xxx", xxx同样要写js表达式，且可以直接读取到data中的所有属性。
    备注: Vue中有很多的指令，且形式都是: v-????, 此处我们只是拿v-bind举个例子。
     v-bind绑定可以简写冒号

    1.   
    2. <body>
    3.     
    4.     <div id="root">
    5.         <h1>插值语法h1>
    6.         <h3>你好，{{name}}h3>
    7.         <hr/>
    8.         <h1>指令语法h1>
    9.         
    10.         <a :href="url.toUpperCase()">onclicka>
    11.         <h2>单向绑定h2><input type="text" :value="name"><br/>
    12.         <h2>双向绑定h2><input type="text" v-model:value="name"><br/>
    13.     div>
    14.     <script>
    15.         //设置为 false 以阻止 vue 在启动时生成生产提示。2.2.0 新增
    16.         Vue.config.productionTip = false;
    17.         const vm = new Vue({
    18.                 el: '#root', //el用于指定当前Vue实列为那个容器服务，值通常为css选择器字符串
    19.                 data: { //data用于存储数据，数据供el指定的容器使用
    20.                     name: 'good123',
    21.  
    22.                     url: 'http://www.atguigu.com'
    23.                 }
    24.             })
    25.             // const v = new Vue({
    26.  
    27.         // })
    28.         // v.$mount('#root')
    29.     script>
    30. body>

    展现在页面的效果：

          

     
    5、Vue中的事件修饰符


    1. prevent: 阻止默认事件(常用) ;
    2.stop:阻止事件冒池(常用) ;
    3.once:事件只触发一次(常用)
     

    6、Vue中常用的指令

    • v-bind :    单向绑定解析表达式，数据只能从data流向页面可简写为   : Xxx
    • v-model: 双向数据绑定 数据不仅能从data流向页面，还可以从页面流向data。
    • v-for   :   遍历数组/对象/字符串
    • v-on：:  绑定事件监听，可简写为@
    • v-if ：    条件渲染(动态控制节点是否存存在)
    • v-else：条件渲染(动态控制节点是否存存在)
    • V- show：条件渲染(动态控制节点是否展示)

    v-text指令:
    1.作用:向其所在的节点中渲染文本内容。
    2.与插值语法的区别: v-text 会替换掉节点中的内容，{{xx}}则不会。

    v-cloak指令(没有值) :.是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v- cloak属性。
    v-once指令:(没有值) ：.v-once所在节点在初次动态渲染后，就视为静态内容了。

    v-pre指令:(没有值) ：可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。
     
    三个没有值的指令的简单代码展示：

    1. <body>
    2.     
    3.     <div id="root">
    4.         <h1 v-pre>Vue其实很好用h1>
    5.         <h1 v-once>初始化的值为：{{n}}h1>
    6.         <h1 v-cloak>你好，{{n}}h1>
    7.         <button v-cloak @click="n++">onclickbutton>
    8.     div>
    9.     <script>
    10.         //设置为 false 以阻止 vue 在启动时生成生产提示。2.2.0 新增
    11.         Vue.config.productionTip = false
    12.         const x = new Vue({
    13.             el: '#root', //el用于指定当前Vue实列为那个容器服务，值通常为css选择器字符串
    14.             data: { //data用于存储数据，数据供el指定的容器使用
    15.                 n: 1
    16.             }
    17.         })
    18.     script>

        

  • 相关阅读:
    【饭谈】在学习测开网课之前，你的心脏需要武装一下
    Kafka - 异步/同步发送API
    【三】安装k8s+kuboard, 拉取harbor镜像并执行yml文件
    （附源码）php二手服装网站 毕业设计 201711
    nodeJS--axios和fetch
    iso9001认证需要什么资料
    雷达模拟器 HPx-310
    windows线程 互斥锁CreateMutex、ReleaseMutex、CloseHandle
    第五十二章 学习常用技能 - Global 映射
    详解Windows渗透测试工具Mimikatz的内核驱动
  • 原文地址：https://blog.csdn.net/txq231254/article/details/126048685