Vue学习笔记01

最新推荐文章于 2024-09-07 14:37:16 发布

weixin_46020182

最新推荐文章于 2024-09-07 14:37:16 发布

阅读量79

点赞数

分类专栏： vue入门基础文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_46020182/article/details/114265670

版权

vue入门基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue学习笔记01

一个刚学vue的小渣渣路过，仅为笔记，有任何错误的地方欢迎大家指正~~

一、引入vue.js模块

1）通过CDN脚本引入资源,缺点：每一次需要远程引入cdn地址，不方便

<script>http://cdn.jsdelivr.net/npm/vue/dist/vue.js</script>

2）通过node_modules。npm init - y先触发项目，再通过npm i vue -S引入vue包

<script src=./node_modules/vue/dist/vue.js></script>

type="module"

<script type="module">
	imoort moduleName from './node_modules/vue/'
</script>

二、创建hello world

<body>
    <div id="app">{{msg}}</div>
    <script>
        //new Vue:相当于构造器
        const app = new Vue({
            //告诉vue,视图在哪里
            el: "#app",
            //存放响应式对象
            data: {
                msg: "hello world"
            }
        });
    </script>
</body>

三、模板语法

01. 插值表达式{{}}

<div id="app">
        //大胡子语法 可以 拼接字符串
        //{{meg + "你好"}}------> hello world 你好
</div>

02.v-bind绑定数据和元素属性

<div id="app" v-bind:class="test">
//简写形式 :
<div id="app" :class="test"></div>

03.可以使用js表达式

04.Vue中的 $和_

    $开头的属性：公有属性
    _开头的属性：私有属性

<script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: "hello world",
                test:"test"
            }
        });
    </script>

四、事件处理

01.v-on 注册事件

<button v-on:click="handleClick">点击</button>
//简写形式 @
<button @click="handleClick(1,$event)">点击</button>

methods: {
            handleClick(type,e) {
              console.log(type);
              console.log(e);//e为默认参数：MouseEvent
            }
         }

02.修饰符

      once：只生效一次
      prevent：阻止表单提交
      ........

//once 触发一次事件
<button @click.once="count++">点击{{count}}</button>

五、计算属性

 *依赖别的属性的属性
 *可以依赖多个属性(多对一) ：一个值可以对应多个属性
 *可缓存 ：如果 其中 所依赖的属性没有发生变更，则可直接打印输出；如果其中依赖的属性发生变化，则会重新计算
 *一定要返回一个数据

//计算属性

// reverseMsg当做一个属性使用
<div id="app" :class="test">{{reverseMsg}}</div>
computed: {
             reverseMsg() {
               console.log("===========");
               return this.msg.split('').reverse().join('');
             }
          }

计算属性与函数的区别
每次打印时，计算属性直接打印，函数则需要每次计算，从这一方面能够得知计算属性是有缓存特性的

//函数

<div id="app" :class="test">{{reverseHanlde()}}</div>

 methods: {
            reverseHanlde() {
              console.log("reverse---Handle");
            }
          }

六、watch

  一对多：根据一个属性可以触发多个属性

<div id="app">
    {{count}} <br /> {{hello1}}-------{{hello2}}; <br />
    <button @click="handleClick">点击</button>
</div>

<script>
const app = new Vue({
        el: "#app",
        data: {
            count: 0,
            hello1: "",
            hello2: "",
            user:{
              age:10,
              name:"xiaoming"
              }
        },
        methods: {
            handleClick() {
                this.count++;
            }
        },
        watch: {
            //一般用于异步请求数据
            //想观察哪个量,则以谁命名
            //==========1.函数的形式调用==========
            count(newVal, oldVal){
                console.log(newVal, oldVal);  
                //多个值去依赖一个属性
                this.hello1 = "hello1" + newVal;
                this.hello2 = "hello2" + newVal;
            },
            //==========2.以对象的形式调用==========
             count: {
                handler(val, oldVal) {
                    this.hello1 = "hello1" + val;
                    this.hello2 = "hello2" + val;
                 }
             },
             immediate:true, //立即调用
             //==========3.观察对象为对象==========
             user:{
                handler(val,oldVal){
                	console.log("user");
                	console.log(val,oldVal);
                },
             },
             deep:true, //深度观察对象值的变更
             //==========只观察对象里指定的 key==========
             "user.name":{
               handler(val,oldVal){
                 console.log(val);
               }
        }
    })
</script>

七、渲染

01.条件渲染

1） v-if 不满足要求 会干掉整个元素 ，适用于---懒加载
2）v-show 不满足要求 会通过css来 隐藏 display:none，用v-show 更多

<div id="app">

    <div v-if="age===18">你好18岁</div>
    <div v-else-if="age===19">你好19岁</div>
    <div v-else>else</div>

    <div v-show="age===18">18show</div>
</div>

02.列表渲染

for in [Array ||  Object]

Object循环(user key index 必须按顺序)

<div id="app">
     <ul>
         <li v-for="(user,key,index) in users">
          {{user}}---{{user.name}}----{{user.age}}--{{key}}---{{index}}
          </li>
      </ul>
 </div>
 <script>
        const app = new Vue({
            el: "#app",
            data: {
                users: {
                    1: {
                        name: "xiaoming",
                        age: 20
                    },
                    2: {
                        name: "xiaohong",
                        age: 19
                    }
                }
            }
        })
</script>

Array中的循环

<div id="app">
   <ul>
      <li v-for="(user,index) in userList">
          {{user}}---{{user.name}}---{{user.age}}---{{index}}
      </li>
   </ul>
 </div>
  //数据
  userList: [
              {
                name: "xiaoming",
                age: 20
               },
              {
                name: "xiaohong",
                age: 19
              }
           ]

八、class & style

01.Array形式

<style>
      .blue{
           color: blue;
       }
      .fontSize{
           font-size:50px;
       }
</style>
<div id="app">
    <div :class="classes">hahaha</div>
</div>
<script>
   const app = new Vue({
       el:"#app",
       data:{
         count:0,
         classes:["blue","fontSize"]
       }
  })
</script>

##当需要变更属性时，可以用计算属性，但是 data 和 computed 最好保留一个
##在Js中采用驼峰命名法(css：font-szie ------>  js：fontSize)

computed:{
   classes(){
       return ["blue",this.count === 0 ?"fontSize":""];
   }
}

02.Object形式

<div id="app">
   <div :style="styleInfo">style</div>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            count: 0,
            styleInfo: {
                color: "red",
                fontSize: "60px"
            }
        }
   })
</script>

九、表单输入绑定

v-model

<div id="app">
    {{msg}}  <input v-model="msg"/>
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            msg:"hahaha"
        }
    })
</script>

通过vue将视图和数据绑定在一起

weixin_46020182

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue学习笔记01

Vue学习笔记01一个刚学vue的小渣渣路过，仅为笔记，有任何错误的地方欢迎大家指正~~一、引入vue.js模块1）通过CDN脚本引入资源,缺点：每一次需要远程引入cdn地址，不方便<script>http://cdn.jsdelivr.net/npm/vue/dist/vue.js</script>2）通过node_modules。npm init - y先触发项目，再通过npm i vue -S引入vue包<script src=./node_modules
复制链接

扫一扫