Vue 基础语法 (个人总结)

最新推荐文章于 2024-02-04 14:52:21 发布

南七铭

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量2k

点赞数 6

分类专栏： Vue基础个人总结文章标签： vue

本文链接：https://blog.csdn.net/qq_41764462/article/details/103478916

版权

Vue基础个人总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue实例

创建一个 Vue 实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的：

const vm= new Vue({
//选项
})

Vue指令

指令(Directives)是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式，特殊情况除外指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

v-id指令将根据表达式?的值的真假来进行插入或者移出。并且还要else语法和else if 语法

//如果满足条件显示以下内容
<p v-if="?">Vue初学者！One</p>
//如果不满足条件还可以进行下一个条件的判断
<p v-elseif="?">Vue初学者！Two</p>
//如果都满足显示以下代码
<p v-else="?">Vue初学者！There</p>

v-for指令可以遍历数组进行列表渲染。使用的时候需要注意的是iterm in items形式的特殊语法，items是源数据数组，item是数组元素迭代的别名。

     <ul>
        <li v-for="item in items">
        //Vue 支持一个可选的第二个参数为当前的索引。
          {{ item.name }}&nbsp;&nbsp;&nbsp;{{
            item.age
          }}
        </li>
      </ul>

下面是以上指令更详细的示例：

<style>
   //使用 v-cloak指令可以让页面渲染之前不显示Vue的{{msg}}语法
    [v-cloak] {
      display: none;
    }
  </style>
  <body>
    <div id="app" :style="[style1]" v-cloak>
      <button @click="show">点击</button>
      //使用 v-model=? 可以实现双向绑定
      <p>{{ msg }}</p>
      <input type="text" v-model="msg">

     //如果满足条件显示下列代码
     <template v-if="loginType==='username'">
      <label>username</label>
      <input type="text" placeholder="Enter your username" key="one" />
      </template>
      //否则，不满足条件就显示以下代码
      <template v-else>
        <label>Emall</label>
        <input type="text" placeholder="Enter your Emall address" key="two" />
      </template>
      //使用v-for 遍历数组再渲染到页面之中
      <ul>
        <li v-for="(item,index) in items">
        //Vue 支持一个可选的第二个参数为当前的索引。
          {{ index + 1 }}.&nbsp;&nbsp;&nbsp; {{ item.name }}&nbsp;&nbsp;&nbsp;{{
            item.age
          }}
        </li>
      </ul>
      
    </div>
    //导入Vue的文件
    <script src="../js_next/VUE/VUE.js"></script>
    <script>
    //实例化一个Vue
      let vm = new Vue({
      //绑定到某个元素上
        el: "#app",
        data: {
          msg: "Lorem ipsum dolor sit amet. 1",
          loginType: "username",
                //在相应的类名上添加css样式
          style1: {
            color: "bird",
            fontSize: "16px"
          },
          //用于Vue的 v-if 判断是否要显示数据 和 标签
           seenone: true,
          //创建数组里面放一些对象 对应上面的ul>li进行 v-for遍历
          items: [
            { name: "姓名", complated: false, age: "年龄" },
            { name: "小夏", complated: false, age: 18 },
            { name: "小邹", complated: true, age: 19 },
            { name: "小鹏", complated: true, age: 20 },
            { name: "小李", complated: false, age: 21 },
            { name: "小刘", complated: true, age:18}
          ]
        },
        methods: {
        //标签绑定事件触发从而调用函数执行函数内的代码
          show() {
            this.seenone = !this.seenone;
            this.loginType == "username"
              ? (this.loginType = "emall")
              : (this.loginType = "username");
              //反序数据
            this.msg = this.msg
              .split("")
              .reverse()
              .join("");
          }
        }
      });
      });
    </script>
  </body>

计算属性

computed

<body>    
<div id="app">    
    <p>{{ message }}</p>       
    // Hello Vue! 
     <p>{{ reverseMess }}</p>    
     // !euV olleH 
 </div>
 //在 bootcdn 官网请求的vue文件 避开了下载到本地，但是前提是电脑需要联网
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script> 
 <script> 
  const data = { message: 'Hello Vue!'}
  const vm = new Vue({
   el: '#app',
    data: data,
    computed: {
    reverseMess: function () {
     return this.message.split('').reverse().join('') 
     } 
   } 
});   
 </script>
  </body>

``
计算属性的值依赖于数据，如果数据发生变化，计算属性会发生相应的改变。

计算属性缓存 vs 方法

methods

<body>
<div id="app"> 
 <p>{{ message }}</p> 
  //Hello Vue!
  <p>{{ reverseMess() }}</p> 
 // !euV olleH 
   </div>   
  //这里也是从bootcdn官网请求的文件
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
 <script> 
  const data = {
   message: 'Hello Vue!'
   } 
   const vm = new Vue({ 
   el: '#app',
   data: data,
   methods: {
   reverseMess: function () {
   return this.message.split('').reverse().join('') 
    }
   }
  });
  </script> 
  </body>

计算属性和方法的区别

从以上两个例子当中可以看出，感觉计算属性和方法都是同一个东西。
但是实际上，计算属性只有在它的相关依赖发生改变时才会重新求值。相比而言，只要发生重新渲染，methods调用总是会执行所有函数

南七铭

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
Vue 基础语法 (个人总结)

Vue实例创建一个 Vue 实例每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的：const vm= new Vue({//选项})Vue指令指令(Directives)是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式，特殊情况除外指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。v-id指令将根据表达式?的值的...
复制链接

扫一扫