Vue基础（Vue的本地应用）

最新推荐文章于 2024-05-27 09:57:03 发布

冰镇奶茶

最新推荐文章于 2024-05-27 09:57:03 发布

阅读量840

点赞数 1

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_57002951/article/details/122190807

版权

笔记专栏收录该内容

29 篇文章 3 订阅

订阅专栏

一、Vue基础

1、尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

开发版本

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

生产版本

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2、el属性

el：挂载点

Vue 命中的范围：el命中的元素及其内部的后代元素

css选择器都可用，但是建议使用id选择器

不要把vue挂载到< html>或者< body>上

3、data：数据对象

Vue用到的数据定义在data中

data中可以写复杂类型的数据

渲染复杂类型的数据时，遵守JS语法即可。

data中可以添加这样的数据类型


data:{

app:"字符串",

school：[1,2,3,4,5,6,7,8 ],  

www:{

name:123,

age:21

},

}

4、语法

<body> 
 <div id="app">
     {{message}}
     <h1>{{school.name}}
     {{school.class}}</h1>
     <ul>
         <li>{{a[0]}}</li>
         <li>{{a[1]}}</li>
         <li>{{a[2]}}</li>
     </ul>
 </div>
 <!-- 开发环境版本，包含了有帮助的命令行警告 --> 
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
 var app=new Vue({    //通过var关键字创建一个vue实例
 el:"#app",           //选择器（最好使用id选择器）   
 data:{               //对选中的
     message:"Hellow Vue !",
     school:{
         name:"张三",
         class:"三班"
     },
     a:["北京","上海","深圳"]
 }
})
 </script>
</body>

二、vue指令

【1】学习路线：

1、内容绑定，事件绑定

2、显示切换，属性绑定

3、列表循环，表单元素绑定

【2】v-text

设置标签的文本值

        <div id="app">
            <h1 v-text="message+'!'">你好</h1>
            <h2>{{info}}+"!"住在狗熊岭</h2>
        </div>

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

        <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello!",
                info:"熊大"
            }
        })
        </script>

【3】v-html

设置标签的 innerHTML（内置HTML）

        <div id="app">
        <p v-html="content"></p>    
        <p v-text="content"></p>
        </div>



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

        <script>
        var app=new Vue({
        el:"#app",
        data:{
            content:"<a href='https://www.baidu.com'>hello</a>"
        }
        })
        </script>

【4】v-on指令

为元素绑定事件

v-on：click ------------------------------- @click 单击事件执行

v-on:monseenter ------------------------ @monseenter 鼠标移入执行

v-on:dblclick ------------------------------ @dblclick 双击事件执行

    <div id="app">
        <input type="button" value="事件绑定" v-on:click="dolt">
        <input type="button" value="事件绑定" @click="dolt">
    </div>

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

    <script>
    var app=new Vue({
        el:"#app",
        methods:{
            dolt:function(){
                alert("hello")
            }
        }
    })
    </script>

总结：

◆创建Vue示例时: el(挂载点), data(数据), methods(方法)

◆v-on指令的作用是绑定事件,简写为 @

◆方法中通过 this,关键字获取data中的数据

◆v-text指令的作用是:设置元素的文本值,简写为{}

◆v-html指令的作用是:设置元素的innerHTML

【6】v-show指令

根据表达式的真假，切换元素的显示和隐藏

        <div id="app">
            <input type="button" value="切换显示" @click="down">
        <img v-show="show" src="./img/1.jpg" alt="小猫">
        </div>

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

    <script>
    var app=new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
            down:function(){
                this.show = !this.show;
            }   
        }
    }) 
    
    </script>

总结：

◆v-show指令的作用是:根据真假切换元素的显示状态

◆原理是修改元素的display,实现显示隐藏

◆指令后面的内容，最终都会解析为布尔值

◆值为true元素显示，值为false元素隐藏

◆数据改变之后，对应元素的显示状态会同步更新

【7】v-if指令

根据表达值的真假，切换元素的显示和隐藏（操纵DOM元素）

频繁切换的数用v-show , 反之用v-if

<div id="app">
        <input type="button" value="切换显示" @click="down">
        <p v-if="isShow">hello</p>
        <p v-if="isShow">你好</p>
        <p v-if="temperature>=30">热死了</p>
        </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
        var app=new Vue({
            el:"#app",
            data:{
                isShow:true
                temperature:20
            },
            methods:{
                down:function(){
                    this.isShow = !this.isShow
                }
            }
        })
        </script>

总结：

◆v-if指令的作用是:根据表达式的真假切换元素的显示状态

◆本质是通过操纵dom元素来切换显示状态

◆表达式的值为true,元素存在于dom树中,为false,从dom树中移除

【8】v-bind指令

设置元素属性

语法：v-bind : 属性名=表达式

简写： v-bind ： ------------------------------- ：

<body>
    <div id="app">
    <img v-bind:src="imgSRC">
    <img :src="imgSRC" :title="imgtitle+'!!!'" :class="isActive?'active':''" @click="down">
    <img :src="imgSRC" :title="imgtitle+'!!!'" :class="{active:isActive}" @click="down">
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            imgSRC:"./img/1.jpg",
            imgtitle:"hello",
            isActive:false
        },
        methods:{
            down:function(){
                this.isActive = !this.isActive
            }
        }
    })
    </script>
</body>

总结：

◆v-bind指令的作用是:为元素绑定属性

◆完整写法是v-bind:属性名

◆简写的话可以直接省略v-bind,只保留:属性名

◆需要动态的增删class建议使用对象的方式

【9】v-for指令

根据数据生成列表结构

<div id="app">
		<ul>
			<li v-for="item in arr">
				{{ item }}
			</li>
			
			<li v-for="(it,index) in arr">
				{{index+1}}校区：{{it}}
			</li>
			<li v-for="is in vegetables" :title="is.name">
				{{is.name}}
			</li>
		</ul>
		<button @click="add">add</button>
		<button @click="remove">shift</button>
	</div>



	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
	var app=new Vue({
		el:"#app",
		data:{
			arr:["北京","上海","广州","深圳"],
			vegetables:[
				{name:"西兰花炒蛋"},
				{name:"蛋炒西兰花"}
			]
		},
		methods:{
			add:function(){
				this.vegetables.push({name:"花菜炒蛋"}) //增加元素
			},
			remove:function(){
				this.vegetables.shift();  //默认移除最左边的元素
			}
        }
	})
	</script>

总结：

◆v-for指令的作用是:根据数据生成列表结构

◆数组经常和v-for结合使用

◆语法是( item,index) in 数据

◆item 和index可以结合其他指令一起使用

◆数组长度的更新会同步到页面上，是响应式的

【10】v-on补充

传递自定义参数，事件修饰符


        <div id="app">
            <input type="button" value="点一下" @click="doit(281672,9287346)">
            <input type="text" @keyup.enter="down">
        </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
    var app=new Vue({
        el:"#app",
        methods:({
            doit:function(it,is){
                alert(it);
                alert(is);
            },
            down:function(){
                alert("吃了某")
            }
        })
    })
    
    </script>

总结：

◆事件绑定的方法写成函数调用的形式，可以传入自定义参数.

◆ 定义方法时需要定义形参来接收传入的实参

◆事件的后面跟上.修饰符可以对事件进行限制

◆.enter可以限制触发的按键为回车

◆事件修饰符有多种

【11】v-model指令

获取和设置表单元素的值（双向数据绑定）

<body>
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"hello"
        },
        methods:{
            getM:function(){
                
                alert(this.message);
            }
            
        }
    })
    </script>
</body>

总结：

◆v-model指令的作用是便捷的设置和获取表单元素的值

◆绑定的数据会和表单元素值相关联

◆绑定的数据←--→表单元素的值