Vue基础——Vue

最新推荐文章于 2023-10-16 12:32:14 发布

A-kang

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量225

点赞数

文章标签： vue js html

本文链接：https://blog.csdn.net/weixin_45651821/article/details/108208033

版权

一、认识Vue

Vue就是js的一个库，这个库中提供了一个Vue类，通过这个类的对象可以和html中的标签进行绑定。

Vue对象
new Vue({
el: 需要绑定的标签的id选择器,
data: 对象,为被绑定的标签提供各种数据,
methods: 对象,通过提供方法来提供功能,
computed: 对象,通过提供方法来提供数据
})

2.指令
{{Vue属性}} - 标签内容
v-bind:标签属性名 = “Vue属性” - 标签属性
v-for=‘变量 in Vue对象提供的序列’ - for循环
v-if=“Vue属性” -
v-on:事件属性 = ‘Vue方法名’ (@事件属性名=‘Vue方法名’) - 事件绑定
v-model = ‘Vue属性’ - 双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue基础</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
        <div id="app1">
            <!--========= 1.绑定标签内容 ===========-->
            <h1>1.绑定标签内容</h1>
            <p>{{message}}</p>
            <a href="">{{message+p}}</a>
            <p>信息：{{message}}</p>
            
            <!-- ========= 2.绑定标签属性 ============ -->
            <h1>2.绑定标签属性 </h1>
            <a v-bind:href="url">超链接</a>
            <a v-bind:href="'https://'+url2">京东</a>
            
            <!-- ========= 3.for循环 =============== -->
            <h1>3.for循环 </h1>
            <div id="" v-for="item in names">
                <p>{{item}}</p>
                <a href="">{{item[0]+'...'+item[item.length-1]}}</a>
            </div>
            
            <!-- ==========4.if ============= 
            v-if="vue对象对应的条件语句"   -   条件语句的结果是true对应的标签就存在，否则对应标签不存在
            -->
             <h1>4.if语句 </h1>
            <p v-if="isShowTitle">{{title}}</p>
            <p v-if="title.length > 0">{{title}}</p>
            <p v-if="Boolean(title)">{{title}}</p>
            
            <!-- ============5.v-on ============== -->
            <h1>5.v-on </h1>
            <button type="button" v-on:click="action1">按钮1</button>
            <button type="button" @click="action1">按钮11</button>
            <button type="button" v-on:click="action2">按钮2</button>
            <button type="button" v-on:click="action3">按钮3</button>
            
            <!-- ============6.v-mode 双向绑定 ============== 
            只有表单相关标签中的一部分标签才能进行双向绑定：输入框相关标签、单选按钮、复选按钮、文件选择、颜色选择、图片选择、日期选择等；下拉列表、多行文本域
            -->
            <h1>6.v-mode 双向绑定 </h1>
            
            <!-- 1）输入框双向绑定，绑定是输入框的内容 -->
            <p>{{name}}</p>
            <input type="text" name="" id="" v-model="name" />
            <br><br>
            
            <!-- 2)下拉列表的双向绑定，绑定的是当前被选中的选项 -->
            <p>{{select}}</p>
            <select name="" v-model="select">
                <option v-bind:value="city" v-for="city in citys">{{city}}</option>
            </select>
            
            <!-- 3)单选按钮和复选按钮的双向绑定绑定的是按钮的选中状态 -->
            <input v-model="isSelectBall" type="checkbox" name="" id="ball" value="篮球" /><label for="ball">篮球</label>
            
            
        </div>
        
        <script type="text/javascript">
            
            function btnAction3(evt){
                alert('按钮3倍点击')
            }
            
            
            app1 = new Vue({
                el:'#app1',
                data:{
                    p:'我是p标签',
                    message: '你好吗？',
                    url: 'https://www.baidu.com',
                    url2: 'www.jd.com',
                    names:['肖生克的救赎', '阿甘正传', '教父'],
                    title: '电视剧',
                    isShowTitle: true,
                    name: '张三',
                    citys: ['成都', '北京', '大连', '青岛'],
                    select: '北京',
                    isSelectBall: true
                },
                methods:{
                    action1: function(evt){
                        // methods中所有方法的this都是当前Vue对象
                        console.log(this)
                        console.log(arguments, evt)
                        alert('按钮1被点击')
                    },
                    action2: (evt)=>{
                        console.log(evt)
                        alert('按钮2倍点击')
                    },
                    action3:btnAction3
                    
                }
            })
            
            
            
            // 通过Vue对象获取或者修改data里面的值
            app1.p = 'hello Vue!'
            app1.$data.p = '你好！Vue!'
           
        </script>
        
        <h1>案例：</h1>
        <div id="app2">
            <div v-for="item in goods">
                <img v-bind:src="item.image" >
                <p v-if="item.discount<1">{{String(item.discount).slice(2)}}折</p>
                <span>{{item.name}}</span>
                <span>{{item.price}}</span>
            </div>
        </div>
        <script type="text/javascript">
            data = {
                goods:[
                    {name: '鞋子1', price:300, image: 'img/a1.jpg', discount:1},
                    {name: '鞋子2', price:245, image: 'img/a2.jpg', discount:0.9},
                    {name: '鞋子3', price:199, image: 'img/a3.jpg', discount:0.85},
                ]
            }
            app2 = new Vue({
                el: '#app2',
                data:data
            })
        </script>
        
	</body>
</html>

二、计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
        <div id="app1">
            <p>总数量:{{totalCount}}</p>
            <p>总价格:{{totalPrice}}</p>
        </div>
        
        
        <script type="text/javascript">
            app1 = new Vue({
                el:'#app1',
                data:{
                    goods:[
                        {price:109, count:3},
                        {price:56, count:2},
                        {price:208, count:4},
                        {price:359, count:1}
                    ]
                },
                computed:{
                    totalPrice:function(){
                        console.log(this.goods)
                        return this.goods.reduce(function(x,y){
                            return x + y.price*y.count
                        }, 0)
                    },
                    totalCount: function(){
                        var goods = this.goods
                        
                        // 穷人：
                        // var sum1 = 0
                        // goods.forEach((item)=>{
                        //     sum1+=item.count
                        // })
                        // return sum1
                        
                        // 小资:
                        return goods.reduce((x,y)=>{
                            return x+y.count
                        }, 0)
                    }
                }
                
            })
        </script>
	</body>
</html>

三、通过Vue绑定网络数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>  
	</head>
	<body>
        <div id="news">
            <div id="" v-for="item in news">
                <h2>{{item.title}}</h2>
                <img v-bind:src="item.picUrl" >
                <p>{{item.ctime}}</p>
            </div>
        </div>
        
        <script type="text/javascript">
            
            // 1.关联Vue对象
            app1 = new Vue({
                el: '#news',
                data:{
                    news:null
                }
            });
            
            // 2.获取数据
            (function(){
                $.ajax({
                    url: 'http://api.tianapi.com/apple/index?key=c9d408fefd8ed4081a9079d0d6165d43&num=10',
                    type: 'GET',
                    success:function(result){
                        app1.news = result.newslist
                    }
                    
                })
            })()
            
            
        </script>
        
	</body>
</html>