2小时入门-Vue

Vue入门

一、什么是vue？

JavaScript的框架
- 框架是不同于向jQuery这样的js库，框架需要遵守它的规则，才能使用

二、vue的特点

JavaScript框架
简化Dom操作
响应式数据驱动

三、实现第一个vue程序

导入vue.js
创建vue对象，并设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

<head>
    <!-- 1.引入vue文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.模板字符渲染 -->
    <div id="app">
        {
    
    {
    
    message}}
    </div>
    
    <script>
        // 3.创建vue对象，并设置要渲染的DOM对象和属性
        var app = new Vue({
    
    
            //el只能指定双标签，而且不能指定html和body元素
            el: '#app',
            //数组的作用范围为el指定的dom元素的内部
            data: {
    
    
                message: 'first vue'
            }
        })
    </script>
</body>

Vue指令

都是标签的属性值

一、v-text

相当于(textContent)默认的写法会替换全部的内容。即我是谁就不显示了。

也可以进行拼串等操作，h2那个标签只显示first vue~。

<!-- 模板字符渲染 -->
    <div id="app">
        {
    
    {
    
    message}}
        <h2 v-text="message+'~'">我是谁</h2>
    </div>

 // 创建vue对象，并设置要渲染的DOM对象和属性
        var app = new Vue({
    
    
            el: '#app',
            data: {
    
    
                message: 'first vue'
            }
        })

二、v-html

相当于(innerHTML)默认的写法会替换全部的内容。会把内容解析成html再输出

 <!-- 模板字符渲染 -->
    <div id="app">
        {
    
    {
    
    message}}
        <h3 v-html="htmlText"></h3>
    </div>

 // 创建vue对象，并设置要渲染的DOM对象和属性
        var app = new Vue({
    
    
            el: '#app',
            data: {
    
    
                message: 'first vue',
                htmlText: '<a href="http://baidu.com">我是一个链接</a>'
            }
        })

三、v-on

相当于(on)是用来绑定事件的属性

在这里插入图片描述

如果你要在函数中，获取DOM元素然后在修改他。或许你要在Vue只用换一下思维了，因为Vue是数据驱动的所以你只需要获取响应的数据然后更改对应的数据就可以实现更改DOM元素的操作了。

期中获取在data中获取对应的值用this.键获取

<!-- 模板字符渲染 -->
    <button @click='change' id="app">{
    
    {
    
    message}}</button>

    <script>
        // 创建vue对象，并设置要渲染的DOM对象和属性
        var app = new Vue({
    
    
            el: '#app',
            data: {
    
    
                message: 'first vue',
            },
            methods: {
    
    
                change: function () {
    
    
                    this.message += '~假的'
                }
            },
        })
    </script>

在这里插入图片描述

四、v-show

根据布尔值的真假，在切换显示状态，ture显示、false隐藏。

期中v-show属性的值也可以写表达式，即最后表达式都会解析为布尔值

原理是修改display:none，实现隐藏。

 <!-- 模板字符渲染 -->
    <div id="app">
        <button @click='change'>切换显示状态</button>
        <button @click='add'>增加年龄</button>
        <img src="https://0x9.me/5aiEb" v-show='isTrue'>
        <img src="https://0x9.me/kD4pi" v-show='age>=18'>
    </div>
    <script>
        // 创建vue对象，并设置要渲染的DOM对象和属性
        var app = new Vue({
    
    
            el: '#app',
            data: {
    
    
                isTrue: false,
                age: 17,
            },
            methods: {
    
    
                change: function () {
    
    
                    this.isTrue = !this.isTrue
                },
                add: function () {
    
    
                    this.age++;
                }
            },
        })
    </script>

五、v-if

和v-show基本用法和用途一样，唯一不同的是v-show切换的是属性display:nono属性而v-if是根据true或false添加或移除DOM元素

在实际开发中经常切换显示的用v-show反之用v-if

六、v-bind

用途：设置元素的属性。

语法：v-bind:属性名=表达式期中v-bind可以省略，所以也能写成:属性名=表达式

在这里插入图片描述

切换class是否生效的方式：

{active:isTrue}根据isTrue的“真假”表示active是否生效
用三元表达式表示是否生效

---css
<style>
    .active {
    
    
        border: 10px solid black;
    }
</style>

---html
 <div id="app">
        <img :src="Src" v-bind:title="Title" :class="{active:isTrue}" @click='changeBolen'>
            
        <img :src="Src" v-bind:title="Title" :class="isTrue?'active':''" @click='changeBolen'>
            
    </div>

---js
var app = new Vue({
    
    
    el: "#app",
    data: {
    
    
        Src: '01.png',
        Title: '马里奥',
        isTrue: false
    },
    methods: {
    
    
        changeBolen: function () {
    
    
            this.isTrue = !this.isTrue
        }
    },
})

七、v-for

用途：根据数据生产列表结构，生成的数据可以在本标签中使用也可以在其他标签中使用。例如:title=“data”期中data就是for循环出来的数据

语法：(item,index)in 数据或item in 数据

改变数据页面也会同步的更新上去

在这里插入图片描述

<div id="app">
    <button @click="add">添加数据</button>
    <button @click="remove">删除数据</button>
    <ul>
        <li v-for="(data,index) in arry" :title="data">
            这是第{
    
    {
    
    index+1}}个水果:{
    
    {
    
    data}}
        </li>
        <h2 v-for="item in obj">{
    
    {
    
    item.name}}</h2>
    </ul>
    <script>
        var app=new Vue({
    
    
            el:'#app',
            data:{
    
    
                arry:['苹果','香蕉','桃子','红龙果'],
               obj:[{
    
    name:'赵建立'},{
    
    name:'网极客'}]
            },
            methods:{
    
    
                add:function () {
    
    
                    this.obj.push({
    
    name:'沃明师'})
                },
                remove:function () {
    
    
                    this.obj.shift()
                }
            }
        })
    </script>
</div>

八、v-on补充

传递自定义参数

在触发事件时传递参数，并在所触发的函数中定义形参接受就可以了

事件修饰符

在事件后面跟上.修饰符就可以对事件进行限制了，例如@keyup.enter='函数'就可以限制按钮在按enter时才触发函数。

具体的事件修饰符https://cn.vuejs.org/v2/api/#v-on

<div id="app">
    <!--只有按下enter才能触发函数-->
    <input type="text" @keyup.enter="say">
    <input type="button" value="按钮" @click="fun(200,'ok')">
</div>

<script>
    var app=new Vue({
    
    
        el:'#app',
        data:{
    
    

        },
        methods:{
    
    
            fun:function (num,text) {
    
    
                console.log(num);
                console.log(text);
            },
            say:function () {
    
    
                alert('你是个帅哥吗~~')
            }
        }
    })
</script>

九、v-model(表单双向绑定)

所谓双向绑定就是：表单的数据和data中的数据相关联，一个修改另一个也跟着修改

在这里插入图片描述

<div id="app">
    <input type="text" v-model="message" @keyup.enter="get">
    <input type="button" value="修改message" @click="set">
    <p>{
    
    {
    
    message}}</p>
</div>

<script>
    var app = new Vue({
    
    
        el: '#app',
        data: {
    
    
            message: 'first vue'
        },
        methods:{
    
    
            get:function () {
    
    
                console.log(this.message)
            },
            set:function () {
    
    
                this.message='修改的值'
            }
        }
    })
</script>

axios的网络请求库

一、axios介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

使用步骤

导入axios的网络请求库
请求格式

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
//引入包
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head> 

//具体使用
<script>
        axios.get('https://autumnfish.cn/api/joke/list?num=3').then(res => {
    
     console.log(res), err => {
    
     console.log(err) } })
        axios.post('https://autumnfish.cn/api/user/reg', {
    
     username: 'zjl' }).then(res => {
    
     console.log(res), err => {
    
     console.log(err) } })
    </script>

二、axios在Vue中的使用

需要注意的是，在回调函数中this的值会改变，所以要在回调函数中调用this的值，要提前用一个变量保存一下this的值

在这里插入图片描述

 <div id="app">
        <button @click='fun'>获取一条笑话</button>
        <h2>{
    
    {
    
    message}}</h2>
 </div>

 <script>
        var app = new Vue({
    
    
            el: '#app',
            data: {
    
    
                message: '获取一条随机笑话'
            },
            methods: {
    
    
                fun: function () {
    
    
                    var _this = this
                    //调用这个链接会获得一个随机笑话，然后把他设置给message，p标签的数据也就改变了
                    axios.get('https://autumnfish.cn/api/joke/list?num=1').then(res => {
    
     _this.message = res.data.jokes[0] }, err => {
    
     console.log(err) })
                }
            },
        })
  </script>

Vue入门

Vue指令

axios的网络请求库

猜你喜欢