• Vue知识框架

    思维导图

    前言

    此知识框架为本人独立完成，难免有疏漏之处，请多多包涵。若对你有帮助，不妨给我点个免费的赞。若文章无法正确显示，备用文章链接Mick的自学笔记，我会不断更新文章内容，学无止境。

    妹子图

    总览

    Vue

    Vue是什么

    Vue是什么

    Vue的引用

    Vue的引入

    MVVM

    MVVM

    模板语法

    模板语法

    指令

    指令

    Vue实例

    Vue实例

    条件渲染

    条件渲染

    class与style的绑定

    class与style的绑定

    事件

    事件

    链表渲染

    列表渲染

    生命周期

    生命周期

    表单

    表单

    组件

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8e7hy2Tc-1659923411712)(https://super-ly-image.oss-cn-hangzhou.aliyuncs.com/%E7%BB%84%E4%BB%B6.svg)]

    Vue-router

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ymg9NT5J-1659923411712)(https://super-ly-image.oss-cn-hangzhou.aliyuncs.com/Vue-router.svg)]

    vue-cli

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H1pEaiKB-1659923411713)(https://super-ly-image.oss-cn-hangzhou.aliyuncs.com/vue-cli.svg)]

    Vuex

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xDloZg3H-1659923411713)(https://super-ly-image.oss-cn-hangzhou.aliyuncs.com/Vuex.svg)]

    差不多就这些，还有一些没展示出来的，点击总览里的脚注进行跳转

    总览

    思维导图全部1

    点击脚注链接跳转

    Vue基础语法

    1.前言

    概述：Vue是一款前端渐进式框架，可以提高前端开发效率，模块化开发。

    特点：

    Vue通过MVVM模式,能够实现视图与模型的双向绑定。

    数据驱动：简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

    Snipaste_2022-07-27_15-13-52

    Vue.js的三种安装方式

    Vue.js三种安装方式

    Vue的导入

    概述：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。
    语法：

    <!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    案例：

    <div id="app">
    <h1>用户名:<input type="text" v-model="name"/></h1> <br/>
    <h1>您输入的用户名是: {{name}}</h1>
</div>

<script type="text/javascript">
    //创建一个Vue对象
    var app = new Vue({
        //指定,该对象代表
    ,也就是说,这个div中的所有内容,都被当前的app对象管理
        el: "#app",
        //定义vue中的数据
        data: {
            name: ""
        }
    });
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    2.模板语法

    文本

    使用Vue自带的插值语法进行书写

    {{}}

    注意：

    我们可以在双括号里填写状态(vue实例里data里的值)，比如在Vue实例中，有个状态叫做msg，我们可以这样用它：{{msg}}

    识别html标签

    使用v-html指令，可以非常容易让Vue知道你在这个地方是要渲染一个DOM节点的。

    

    • 1

    案例

    <body>
  <div class="box">
    {{username}}
    <div v-html="html"></div>
  </div>
</body>

</html>
<script src="../js/vue.js"></script>
<script>
  var app = new Vue({
    el: ".box",
    data() {
      return {
        username: "xm",
        html: '
    我是h1标签
    '    
      }
    }
  })
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    Snipaste_2022-07-28_08-51-33

    使用JavaScript表达式

    表达式：加减乘除，三元运算符，与或非

    vue提供了完全的javaScript的数据支持

    {{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{age+1}}:{{age>5?"成年":"未成年"}}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id">div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。

    注意：

    在插值表达式中，建议不要放太复杂的表达式，因为插值语法本来就是渲染数据的。数据处理可以放到计算属性里去做。

    3.内置指令

    1.v-model表单绑定

    实现双向绑定的本质：

    • 使用v-model的作用就是实现双向数据绑定2

    • v-model可以使用input时间和:value来进行替代。

      <body>
    <div id="app">
  
      <input type="text" v-model="message">
      <h2>{{message}}</h2>
  
      <input type="text" :value="message" @input="valueChange">
    </div>
    <script>
      let app = new Vue({
        el: '#app',
        data: {
          message: '你好呀！'
        },
        methods: {
          valueChange(event) {
            this.message = event.target.value
          }
        }
      })
  
    </script>
  </body>
  

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    上面的代码里，event事件用来获取输入框输入的值。

    监听input方法，使得一旦有输入数据，便会调用valueChange方法，在valueChange方法中通过event事件得到值，完成对vue实例中值的修改。

    Snipaste_2022-05-22_19-21-48

    • 限制：