Vue2 不多但够用（大概）

Traveler.png

已于 2022-11-14 22:35:19 修改

阅读量227

点赞数

文章标签： vue.js javascript 前端

于 2022-11-14 22:34:24 首次发布

本文链接：https://blog.csdn.net/weixin_74448257/article/details/127857188

版权

本文详细介绍了Vue2的特性和使用，包括MVVM结构、Vue指令如v-model、v-if/v-for，计算属性，vue-cli的安装与项目创建，组件的生命周期、数据共享、动态组件和插槽，以及路由模块的基础使用，如动态路由、嵌套路由和导航守卫。

摘要由CSDN通过智能技术生成

Vue的特性
MVVM
Vue的基本使用
Vue指令
计算属性
vue-cli
Vue组件
路由模块

Vue的特性

vue通过数据驱动视图，当数据发生改变时视图也会发生相应变化
vue可以与html表单进行数据绑定，当表单数据变化时使用vue可以在不操作DOM元素的情况下，获取表单中的数据

MVVM

vue使用MVVM的结构模型，进行数据数据与视图的交互

M：Model 表示当前页面渲染时所依赖的数据源
V：View 表示当前页面所渲染的DOM结构
VM：ViewModel 表示vue实例对象，负责Model和View之间的数据交换

Vue的基本使用

<body>
  <!-- 声明一个将要被Vue所控制的DOM区域 -->
  <!-- 两个大括号包裹一个data的属性，是Vue中的插值表达式，用来插入具体的内容 -->
  <div id="app">{
  {username}}</div>

  <!-- 通过CDN使用Vue，通过script引入vue.js文件-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 创建一个Vue实例
    const vm = new Vue({
     
      //el 表示Vue要控制的DOM元素，值为一个css选择器，就是View视图区域
      el:"#app",
      //data 用来驱动视图的具体数据，就是Model数据源
      data:{
     
        username:"kiana",
      }
    })
  </script>
</body>

注：el属性对应的选择器选择多个DOM对象时，只会使用第一个匹配的对象作为View区域，但一般默认把一个id为app的div标签当做View视图

Vue指令

Vue通过几个特殊的指令，来进行html与js之间的数据交互

内容渲染指令

v-text
{ {插值表达式}}
v-html

<body>
  <div id="app">
    <!-- v-text指令, 渲染data中的数据-->
    <p v-text="username"></p>
    <!-- 插值表达式，只是占位符，可以与其他内容同时存在 -->
    <p>这是{
  {interpolation}}</p>
    <!-- v-html指令，可以渲染html标签 -->
    <div v-html="info"></div>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const vm = new Vue({
     
      el:"#app",
      data:{
     
        username:"kiana",
        interpolation:"插值表达式",
        info:"<strong>v-html指令可以渲染html标签</strong>"
      }
    })
  </script>
</body>

属性绑定指令

v-bing指令，将数据绑定给html标签的属性当做属性值，可以简写为冒号（:）

<body>
  <div id="app">
      
    <input type="text" v-bind:placeholder="username">
      
    <!-- v-bind绑定属性后属性值中的是js代码 -->
    <!-- 直接用字符串赋值 -->
    <input type="text" v-bind:placeholder="'德克萨斯'">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const vm = new Vue({
     
      el:"#app",
      data:{
     
        username:"琪亚娜",
      }
    })
  </script>
</body>

事件绑定指令

v-on指令绑定事件，可以简写为@

<body>
  <div id="app">
    count的值是 {
  {count}}
    <!-- 通过v-on绑定事件 -->
    <button v-on:click="add">点我一下</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const vm = new Vue({
     
      el:"#app",
      data:{
     
        count:0
      },
      // 事件处理函数写在methods中
      methods: {
     
        add:function(){
     
          //通过this关键字可以调用到data中的属性，this代表的数vue实例
          this.count++;
        }
      }
    })
  </script>
</body>

$event事件对象

<body>

  <div id="app">
    count的值是{
  {count}}
    <!-- 通过 函数名(参数) 的方式可以给事件处理函数传参 -->
  <button @click="minus(1,$event)">减一</button> <!--使用参数的形式 $event表示事件对象-->
  <button @click="add">加一</button> <!-- 不使用参数的形式，默认事件处理函数的唯一参数就是事件对象-->
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">