Vue基础语法

最新推荐文章于 2024-05-19 20:18:26 发布

Rk..

最新推荐文章于 2024-05-19 20:18:26 发布

阅读量402

点赞数 1

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

本文链接：https://blog.csdn.net/m0_46979453/article/details/120803669

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听与数据绑定.遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含Ajax之类的通信功能,通信功能我们需要使用Axios框架做异步通信。

Vue的开发都是要基于NodeJS,实际开发采用vue-cli做脚手开发，vue-router路由，vuex做状态管理;Vue UI，界面我们一般使用ElementUI快速搭建前端项目。

下面的内容并不是真正的Vue程序，只是Vue的一些基础语法。

一、了解Vue程序:

1、使用idea编写vue程序要下载vue插件

2、创建一个html文件

3、引入vue.js

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

4、创建vue实例

5、将数据绑定到页面元素（视图层）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--1、导入vue.js-->
   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<body>

<!--绑定数据到视图层-->
<div id="app">
   {{message}}
</div>

<!--创建vue实例-->
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",//绑定标签
        data:{
            message:"hello,vue"
        },
    });
</script>

</body>
</html>

el:绑定元素的id

data:数据对象中有一个名字为message的属性,并设置值为hello Vue

二、基础语法

1、v-bind属性

<body>
<div id="app">
<!--
如果要将模型数据绑定在html属性中
则使用 v-bind 指令,此时title中显示的是模型数据
-->
<h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h1>
<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="message">我是标题</h1>
</div>

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

new Vue({
    el: '#app',
    data: {
    message: '页面加载于 ' + new Date().toLocaleString()
    }
})
</script>
</body>

2、v-if、v-else-if、v-else

<body>
    <div id="app">
    <!--
    === 三个等号在 JS 中表示绝对等于（就是数据与类型都要相等）
    -->
    <h1 v-if="type === 'A'">A</h1>
    <h1 v-else-if="type === 'B'">B</h1>
    <h1 v-else-if="type === 'C'">C</h1>
    <h1 v-else>who</h1>
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
    el: '#app',
    data: {
    type: 'A'
    }
})
</script>
</body>

===在js中表示数据与类型都要相等

3、v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<div id="app">
       <li v-for="(item,index) in items">
           {{item.message}}---{{index}}
       </li>
</div>
</body>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
           items:[
               {message:'rk1你好'},
               {message:'rk2你好'},
               {message:'rk3你好'}
           ]
        }
    });
</script>
</html>

4、v-on

用于事件监听，给事件绑定方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-on</title>
</head>
<body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<div id="app">
    <br/>
    <button v-on:click="sayHi">click Me</button>
    <hr>
<!--    简写-->
    <button @click="sayHi">click Me</button>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"rk学Vue"
        },
        methods:{//方法必须定义在Vue的methods对象中, v-on绑定事件
            sayHi:function () {
                alert(this.message+",你好,rk")
            }
        }
    });
</script>
</body>
</html>

5、v-model双向数据绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title]]</title>
</head>
<body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<div id="app">
    <div id="app2">
        下拉框
    <select v-model="luo">
        <option>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
        你选中了:{{luo}}
    </div>
</div>

<script>
    var vm=new Vue({
        el:"#app2",
        data:{
            message:"123",
            rk:"男",
            luo:"没选"
        },
    });
</script>
</body>
</html>

6、计算属性:computed

计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性其次这个属性有计
算的能力（计算是动词），这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存
起来的属性（将行为转化成了静态的属性），仅此而已；

使用方法和methods类似，但是computed调用方法时使用的是属性名。computed的属性名不能和methods方法名相同，如果相同，只会调用methods的方法.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title]]</title>
</head>
<!--1、导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<body>
<div id="app">
    {{message}}
    <hr>
    currentTime1:{{currentTime1()}}<br>
    currentTime2:{{currentTime2}}
</div>

<!--创建vue实例-->
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",//绑定标签
        data:{
            message:"hello,rk"
        },
        methods:{
            currentTime1:function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed:{//计算属性 methods和computed中的方法名不能重名  如果重名只会调用methods中的方法
            currentTime2:function () {
                return Date.now();
            }

        }
    });
</script>

</body>
</html>

methods：定义方法，调用方法使用 currentTime1()，需要带括号；
computed：定义计算属性，调用属性使用 currentTime2，不需要带括号;计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

三、组件

1、注册组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<div id="app">
<!--     将vue中的值传给rk标签，rk标签将传过来的值绑定到props属性的luolin上-->
    <rk v-for="itemrk in items" v-bind:luolin="itemrk"></rk>

</div>

<script>
    //定义一个vue组件  名字叫rk
    Vue.component("rk",{
        props:['luolin'],
        template:'<li>{{luolin}}</li>'
    });

    var vm=new Vue({
        el:"#app",
        data:{
            items:["java","linux","前端"]
        }
    });
</script>
</body>
</html>

说明：
        v-for="itemrk in items" ：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的件；
         v-bind:luolin="item" ：将遍历的 item 项绑定到组件中 props 定义的名为 luolin属性上；
        = 号左边的 luolin为 props 定义的属性名，右边的为 itemrk in items 中遍历的 itemrk 项的值；

2、插槽

在 Vue 中我们使用 <slot> 元素，作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;组件里面插组件，组合成为一个动态模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
</head>
<body>
<!--1、导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<div id="rk">
    <vtable>
<!-- vtable-title组件插入属性值为vTitle的插槽中,该组件中的title值从data的t中获取-->
        <vtable-title slot="vTitle" v-bind:title="t"></vtable-title>
<!-- vtable-list组件插入属性值为vList的插槽中,该组件中的list值从data的li中获取-->
        <vtable-list slot="vList" v-for="itemm in li" v-bind:list="itemm"></vtable-list>
    </vtable>
</div>

</body>

<script type="text/javascript">

    Vue.component("vtable-title",//表头
        {
            props:["title"],
            template: '<div>{{title}}</div>'
        }
    )


    Vue.component("vtable-list",//表的数据
        {
            props:["list"],
            template:'<li>{{list}}</li>'
        }
    )

    Vue.component("vtable",//表单组件
        {                   //插入两个组件，并定义其name属性值
            template: '<div>\
                           <slot name="vTitle"></slot>\
                            <ul>\
                           <slot name="vList"></slot>\
                           </ul>\
            </div>'
        }
    )

    var vue = new Vue({
        el:'#rk',
        data:{
          t:"vue",
          li:['rk学组件','rk学插槽','rk学计算属性']
        }
    });

</script>
</html>

运行结果:

3、自定义事件内容分发

数据项在 Vue 的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue 实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题；使用 this.$emit('自定义事件名', 参数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义事件</title>
</head>
<body>
<!--1、导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<div id="rk">
    <vtable>
        <!-- vtable-title组件插入属性值为vTitle的插槽中,该组件中的title值从data的t中获取-->
        <vtable-title slot="vTitle" v-bind:title="t" ></vtable-title>
        <!-- vtable-list组件插入属性值为vList的插槽中,该组件中的list值从data的li中获取-->
        <vtable-list slot="vList" v-for="(itemm,index) in li" v-bind:list="itemm"  :dex="index"
                        v-on:remove="removeList(index)"></vtable-list>
    </vtable>
</div>

</body>


<script type="text/javascript">

    Vue.component("vtable-title",//表头
        {
            props:["title"],
            template: '<div>{{title}}</div>'
        }
    )


    Vue.component("vtable-list",//表的数据
        {
            props:["list","dex"],
            template:'<li>{{dex+1}}----{{list}} <button @click="remove">删除</button></li>',
            methods:{
                remove:function (dex) {
                    //自定义事件分发
                   this.$emit("remove",dex)//自定义数据remove，参数dex
                }
            }
        }
    )

    Vue.component("vtable",//表单组件
        {                   //插入两个组件，并定义其name属性值
            template: '<div>\
                           <slot name="vTitle"></slot>\
                            <ul>\
                           <slot name="vList"></slot>\
                           </ul>\
            </div>'
        }
    )


    var vue = new Vue({
        el:'#rk',
        data:{
            t:"vue",
            li:['rk学组件','rk学插槽','rk学计算属性']
        },
        methods: {
            removeList:function (index) {
                console.log("删除了"+this.li[index]+"oK")
                this.li.splice(index,1);//一次删除一个元素

            }
        }
    });

</script>
</html>

四、Axios

        Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 A JAX 异步通信，其功能特点如下：
        从浏览器中创建 XMLHttpRequests
        从 node.js 创建 http 请求
        支持 Promise API [ JS中链式编程 ]
        拦截请求和响应
        转换请求数据和响应数据
        取消请求
        自动转换 JSON 数据
        客户端支持防御 XSRF（跨站请求伪造）

要导入:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
</head>
<!--导入vue.js-->
<!--引入 JS 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript"></script>
<style>
    /*解决闪烁*/
    [v-cloak]{
        display: none;//没加载完成前显示空白
    }
</style>
<body>
<div id="vue" v-cloak>
    <div>name:{{info.name}}</div>
    <div>page:{{info.page}}</div>
    url:<a v-bind:href="info.url">url:{{info.url}}</a>
    <div>地址:{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
</div>
</body>
<script>
    var vue=new Vue({
        el:'#vue',//绑定标签

        data(){//data和data()不一样 data()里面的属性是通过返回的
            return{
                info:{//info里面要写data对应的属性，要赋值为空
                    name:null,
                    url:null,
                    page:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    }
                }
            }
        },
        mounted(){//钩子函数   发出异步请求
            axios
                .get("data.json")//从data.json文件中获取
                .then(response=>(this.info=response.data));//给info赋值  类似于Lamda表达式 Es6新特性
        }
    })

</script>

</html>

data.json

{
  "name": "Rk学Vue",
  "url": "https://blog.csdn.net/m0_46979453?spm=1001.2101.3001.5343",
  "page": 3,
  "address": {
    "street": "西乡县",
    "city": "汉中市",
    "country": "中国"
  }
}

运行结果:

Rk..

关注

1
点赞
踩
0

收藏

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

Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听与数据绑定.一、构建Vue程序: 1、使用idea编写vue程序要下载vue插件 2、创建一个html文件 3、引入vue.js <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> 4、创...
复制链接

扫一扫