学习vue笔记一——初识vue

    
    

        
        
hello,{{name}} 
    


    

在开始之前我们要知道目前vue是分了vue2 和vue3的，具体的内容可以去官网看看：

vue官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

引入vue：

        cdn

        下载压缩包

        使用npm

引入vue是要放在head标签中

下面是我的测试，仅供参考！！！

    
    
    
    
    
    
    
    
    
    




    
    

        
        
这是第一块区域
        
        
        {{msg}}

        
        {{1+5}}
        
        {{flag ?'真':'假'}}
    
    
    
    

        
这是第二块区域
        {{msg}}
        {{1+5}}
        {{flag ?'真':'假'}}
    



    
    

    

下面这个是完整的一个vue3

    
    
    
    
    
    




    

        {{msg}}
    
    

一、内置指令

1、v-model、v-bind指令

v-model：双向数据绑定        不能简写

v-bind：单向数据绑定        可以直接简写成：

v-model的测试：

    

        
        {{value}}
        
{{ww}}
        
{{diandan}}
        薯条
        烤鱼
        炸鸡
        可乐
        汉堡
    
    

效果图：

 v-bind测试：可以绑定style、src、class（常用）等等

    
    
    
    
    
    



    

        
{{msg}}
        
        
{{msg}}

        发生改变
        
        
动态绑定数据
        
动态绑定数据
        

        
        
哈哈哈，现在气氛真尴尬！！！
        
        
哈哈来看看数组对象

        
        
覆盖问题
        
        
看是哪个属性
    
    

效果图：

 2、v-text、v-html、v-cloak指令

		

		
		

		
		

		
		


		
{{hei}}
		
		

		

		

v-cloak指令（没有值）:
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}的问题。

{{msg}}
const vm = new Vue({
			el: '#root',
			data() {
				return {
					msg: '哈哈哈',
					// hei:'呵呵呵'
					hei: '
文件间
'
				}
			},
			methods: {
			},
		})
{{}}如果加载比较慢，页面会直接出现{{msg}},为防止出现这种情况，可以使用v-cloak

 

3、 v-if、v-show指令

 v-show和v-if

        共同点：控制元素显示和隐藏

        不同点：v-show是控制元素的display，v-if创建和删除dom节点

    
    
    
    
    



    

        

        点击切换
        

        
        

        
        
未成年
        
青年
        
中年团子
        
老年
    

    

效果图：

 4、v-for、key指令

等同于for循环
        for in  of
        js  for in 遍历对象
        js  for of 遍历数组
        vue in of 没有区别
     
       

             遍历数组
            item：数组中的每一项【可命名
            index:下标=值
            arr:原数组
            in：遍历

       

          
            
{{item}}
            
{{item}}
            
{{item}}——{{idx}}
            
            
{{item}}——{{idx}}
        
const vm = new Vue({
            el: '#root',
            data() {
                return {
                    arr: ['团子', '帅哥', '美女'],
                    user: {
                        name: '团子',
                        sex: '女',
                        job: '程序员'
                    },
 methods: {
            }
        });

 

5、v-on和自定义指令

v-on给一个元素绑定一个/多个时间：事件名
事件的基本使用:
1.使用v-on :xxx或xxx绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中,最终会在vm上;
3.methods中配置的函数，不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
5.@click="demo”和 @click="demo($event)”效果一致，但后者可以传参;

 
        变大
        变小
  methods: {
                // big: function () { },//不推荐,太繁琐
                // big:()=>{},//箭头函数不可以，this指向的widow
                big() {
                    // this.imgHeight += 100
                    // this.imgWidth += 100
                    if (this.imgWidth >= 800) {
                        alert('到极限了！')
                    } else {
                        this.imgHeight += 100
                        this.imgWidth += 100
                    }
                },
                small() {
                    if (this.imgWidth <= 200) {
                        alert('不能再小了！')
                    }
                    this.imgWidth -= 100
                    this.imgHeight -= 100
                }

v-on传参测试： 

    
    
    
    
    



    

        
        不加括号
        加括号
        
        传参:参数
        不传：event对象
        加括号不传：undefined

        
        

            

                

                    
哈哈哈
                
            



        
        去官网
        哪里都不去