【Vue】基础语法

Moon里

已于 2024-04-03 11:15:26 修改

阅读量594

点赞数 25

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

于 2024-03-24 15:27:44 首次发布

本文链接：https://blog.csdn.net/qq_57567877/article/details/136988336

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue的基础语法

了解Vue
基础语法1（数据绑定、vue挂载）
基础语法2（列表渲染、条件渲染）
基础语法3（事件绑定）
基础语法4（事件修饰符）

了解Vue

渐进式框架：主张最少（最少的东西实现最多的，是性能的优化）
           比如：vue不一定整体整个项目都用，可能某个页面用，也可能某个页面不用，也可以仅仅用于section或者section中的某个div上；也可以通过vue提供的脚手架搭建整个项目。

自底向上：先编写出基础程序段，然后逐步扩大规模，补充和升级某些功能。
自顶向下：自底向上反向理解

vue.js作者：尤雨溪
vue生态系统/vue技术栈/vue全家桶 指的是：vue.js/vuex/axios/vue-router/element-ui/Van ui......等等


单页面应用（vue、react、angular）：single page application 简称SPA

        优点：1.良好的交互体验（单页面应用的内容改变不需要重新加载整个页面，页面数据是通过ajax异步获取，没有页面之间得切换，不会出现白屏、假死、闪烁现象，页面显示流畅）

              2.良好的前后端工作分离模式（后端不在负责模板得渲染、输出页面的工作，后端api通用化）

              3.减轻服务器压力（单页面应用相对服务器压力小，服务器只用输出数据就可以，不用管展示逻辑和页面合成）

			  4.共用一套后端程序代码，后端同套代码可以从pc端平移到移动端


        缺点：1.SEO（搜索引擎优化），因为是单页面，很多页面是动态加载，爬虫无法获取更多信息，对于网站排名影响较大
					可以通过服务端渲染来解决，也可以采用预渲染的方式解决vue-meta-info 配合prerender-spa-plugin预渲染

              2.单页面就意味着不跳页面，前进？后退？历史记录？ 通过vue-router解决（模拟地址栏改变）



MVC：通常指整个项目架构，M：模型-和数据交互，V：视图-和用户交互，C：控制层-处理业务逻辑

（因为DOM节点操作非常耗性能，所以）Vue是MVVM结构：
											M：数据（js存储的数据）
											V：视图（html标签、dom节点）
											VM：实现M与V的交互（vuejs：实现数据的同步，即双向数据绑定）



组件化开发一般是指前端UI组件（组件和模块：https://blog.csdn.net/weixin_41549971/article/details/131656555）



虚拟Dom：diff算法（了解），只改有区别的地方（尽量减少对Dom的操作）

基础语法1（数据绑定、vue挂载）

<style>
    .red{
        color: red;
    }
    .green{
        color: green;
    }
    #myH1{
        background-color: yellowgreen;
    }
</style>
</head>
<body>
<div id="app"><!--Vue生效的作用域中-->

    <!--数据绑定-->
    <h1>{{message}}</h1>

    <!--双向绑定  VM-->
    <h2>{{mytext}}</h2>
    <input type="text" v-model="mytext">

    <!--动态绑定类-->
    <h1 v-bind:class="mycolor">{{mytest}}</h1>
    <h1 :class="mycolor">{{mytest}}</h1>

    <!--动态绑定图片-->
    <img v-bind:src="imgSrc" alt="">
    <img :src="imgSrc">


    <!--绑定多个属性-->
    <h1 v-bind="{id:myid,title:mytitle}">单身狗</h1>
    <h1 :id="myid" :title="mytitle">单身狗</h1>


    <!--动态判断是否需要使用样式-->
    <div :class="{red:true}">isRed</div>
    <div :class="{red:isRed}">isRed</div>

</div>

<script src="vue.min.js"></script><!--Vue.js的引入-->
<script>
    /*
		/!*创建一个vue对象*!/
		new Vue({
			/!*vue自动挂载在哪个节点（生效区域）*!/
			el:"#app",
			/!*初始数据*!/
			data: {
				message:"hello月亮"
			}
		})
    */

    // 另一种写法手动挂载: $mount()
    let vm=new Vue({
        data:{
            message:"hello月亮",
			mytext:"初始数据",
            mytest:"you are single dog",
            mycolor:"green",
            imgSrc:"duorou.jpg",
            myid:"myH1",
            mytitle:"ME TOO",
            isRed:false,
        }
    }).$mount("#app")

</script>

基础语法2（列表渲染、条件渲染）

<div class="app">

    <h1>列表渲染</h1>
    <div>{{fruits}}</div>
    <div>{{fruits[0].fruitname}}</div>

<!--<table border="1">
        <tr>
            <th>水果名</th>
            <th>价格</th>
        </tr>
        <tr v-for="item in fruits">   	  //item表示当前项（可自取名）
            <td>{{item.fruitname}}</td>
            <td>{{item.price}}</td>
        </tr>
    </table>-->

    <table border="1">
        <tr>
            <th>序号</th>
            <th>水果名</th>
            <th>价格</th>
        </tr>
        <tr v-for="(item,index) in fruits">   <!--item表示当前项-->
            <td>{{index+1}}</td>
            <td>{{item.fruitname}}</td>
            <td>{{item.price}}</td>
        </tr>
    </table>


    <div v-for="value in user">{{value}}</div>  <!--只遍历对象的值-->
    <div v-for="(value,key) in user">{{key}} {{value}}</div>  <!--遍历对象的键和值-->
    <div v-for="(value,key,index) in user">{{index}} {{key}} {{value}}</div>  <!--遍历对象的 键 值 index-->


    <h1>条件渲染</h1>

    <h3>if</h3>
    <div v-if="flag">
        <p>当前内容是否出现在页面取决于条件返回的是ture还是false</p>
    </div>

    <h3>if...else</h3>
    <div v-if="(Math.random()*10)>5">大于5</div>
    <div v-else>其他</div>

    <h3>if...else if...else</h3>
    <div v-if="true">
        <p>反正也看不到</p>
    </div>
    <div v-else-if="fruits.length>2">
        <p>是否显示取决于fruit的长度</p>
    </div>
    <div v-else>
        <p>所有条件都不匹配</p>
    </div>


</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el:".app",
        data:{
            fruits:[
                {fruitname:"桂圆",price:"15元"},
                {fruitname:"蓝莓",price:"20元"},
                {fruitname:"香蕉",price:"30元"},
                {fruitname:"猕猴桃",price:"23元"},
                {fruitname:"西瓜",price:"5元"},
            ],
            user:{
                name:"张三",
                sex:"男",
                age:23
            },
            flag:false,
        }
    })
</script>

基础语法3（事件绑定）

<div class="app">

    <h3>事件绑定</h3>
    <button v-on:click="count+=1">点赞按钮每点一下赞+1</button>
    <span>{{count}}</span>

    <button @click="changeMessage">事件绑定</button>
    <div>{{message}}</div>


    <h3>删除数据</h3>
    <ul>
        <li v-for="(item,index) in fruits">
            {{item.fruitname}} {{item.price}}-----{{index}} <button @click="delMsg(index)">删除</button>
        </li>
    </ul>


</div>
<script src="vue.min.js"></script>
<script>
    let myData={
            count:0,
            message:"测试数据",
            fruits:[
                {fruitname:"桂圆",price:"15元"},
                {fruitname:"蓝莓",price:"20元"},
                {fruitname:"香蕉",price:"30元"},
                {fruitname:"猕猴桃",price:"23元"},
                {fruitname:"西瓜",price:"5元"},
            ],
    }

    let myMethods={
        changeMessage(){
            // console.log(this) //this指向当前vue对象
            // console.log(this.count) //等同于this.$data.count
            // console.log(this.$data) //$或者_
            this.$data.message="改变了测试数据！！！"
        },
        delMsg(obj){
            console.log(obj) //obj拿到的是index的值
            this.fruits.splice(obj,1) //删除对应的数组对象
        },
    }

    new Vue({
        el:".app",
        data:myData,
        methods:myMethods,
    })

</script>

基础语法4（事件修饰符）

<div class="app">
    <!--event对象-->
    <button @click="myEvent">获取event对象</button>
    <button @click="myEvent2('哈哈',$event)">获取event对象</button>


    <!-- .stop阻止事件冒泡-->
    <div @click="foo('爷爷')">
        爷爷
        <div @click.stop="foo('爸爸')">
            爸爸
            <div @click.stop="foo('儿子')">
                儿子
                <a href="基本语法3.html" @click.prevent.stop="doThat">aaa</a>
            </div>
        </div>
    </div>


    <!-- .prevent阻止默认行为，如：action-->
    <form action="基本语法3.html" @submit.prevent="onSubmit">
        <button>提交</button>
    </form>


    <!--阻止默认行为和冒泡-->
    <a href="基本语法3.html" @click.prevent.stop="doThat">aaa</a>


    <!--只执行一次-->
    <button @click.once="myOnce">只执行一次</button>


</div>
<script src="vue.min.js"></script>
<script>
    let myData={}

    let myMethods={
        myOnce(){
            console.log("只执行一次")
        },
        doThat(){
            console.log("阻止默认行为和冒泡")
        },
        onSubmit(){
            console.log("阻止表单提交")
        },
        foo(str){
            console.log(str)
        },
        myEvent(e){
            console.log(e) //event对象
        },
        myEvent2(str,e){
            console.log(str,e)
        },
    }


    new Vue({
        el:".app",
        data:myData,
        methods:myMethods,
    })

</script>

Moon里

关注

25
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【Vue】基础语法

/ console.log(this.count) //等同于this.$data.count。// console.log(this) //this指向当前vue对象。// console.log(this.$data) //$或者_*vue自动挂载在哪个节点（生效区域）*!// 另一种写法手动挂载: $mount()message:"hello月亮"*创建一个vue对象*!//obj拿到的是index的值。//删除对应的数组对象。"阻止默认行为和冒泡"
复制链接

扫一扫

专栏目录