Vue小白入门

最新推荐文章于 2025-05-13 19:40:35 发布

原创最新推荐文章于 2025-05-13 19:40:35 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

1 篇文章

订阅专栏

推荐慕课网Vue.js视频教学，简单、易学、时间短，小白的入手必备

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Vue入门</title>
   <script src="Vue.js"></script>
</head>
<body>
<!--1、挂载点（相当于绑定关于可以相当于类选择或者id选择）、模板可以写在Vue中的tempate中也可以写在挂载点中、实例之间的关系-->
<!--2、Vue实例中的数据 data函数、事件 methods和方法 this.content-->
<!--Vue中的属性绑定和双向数据绑定-->
<!--todolist功能开发-->
<div id="root">
   <div @click="handleClick" :title="title">
      <!--  @等于v-on:  -->
      <!-- :等于v-bind: -->
      <!-- v-model:双向绑定-->
      <!--{{content}}-->
      hello world
   </div>
   <input v-model="content"/>
   <div :value="content">{{content}}</div>
   姓：<input v-model="firstName"/>
   名：<input v-model="lastName"/>
   <div>{{fullName}}</div>
   <div>{{count}}</div>
   <div v-if="show">hello world</div>
   <button @click="handleClick">toggle</button>
   <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
   </ul>
   <div>
      <input v-model="inputValue"/>
      <button @click="handleSubmit">提交</button>
      <ul>
         <li v-for="(item,index) of list" :key="index">{{item}}</li>
      </ul>
   </div>


</div>
<!--v-text与v-html的区别
v-text会进行转义，v-html不会进行转义，同样的内容例如<h1>Hello</h1>  v-text会显示<h1>Hello</h1>  v-html会显示Hello   -->
<!-- v-show 与 v-if 区别
 使用v-show属性只是给控件添加了一个style="display:none" css属性值
 使用v-if 是移除标签
 v-show性能比较好点，如果使用频率大的话使用v-show，不大使用v-if  -->


<script>
   new Vue({
      el:"#root",//接管那个元素，将id为root的元素绑定
      data:{
          content:"this is content",
         title:"this is hello world",
         firstName:'',
         lastName:'',
         count:0,
         show:true,
         list:[],
         inputValue:"",
      },
      //Vue中的计算属性复合运算
      computed:{
          fullName:function () {
            return this.firstName + '' + this.lastName
            }
      },
      //侦听器 内容发生变化时使用
      watch:{
          fullName:function () {
            this.count++
            },
      },
      methods:{
         // handleClick:function () {
            // this.content = "world"
            // }，
            handleClick:function () {
                this.show = !this.show
            },
            handleSubmit:function () {
            this.list.push(this.inputValue)
            this.inputValue=''
            }
      }
   })
</script>
</body>
</html>

此篇文章是本人学习时的文章，仅供参考