Vue初识

最新推荐文章于 2023-03-17 11:13:46 发布
最新推荐文章于 2023-03-17 11:13:46 发布
阅读量138 收藏
点赞数 1
分类专栏： web前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43734041/article/details/120945677
版权

Vue初识

1.Vue初识

  1. Vue是前端三大新框架，Angular.js,React.js,Vue.js之一，
  2. Vue是一个轻巧，高性能，可组件化的MVVM库，同时拥有非常容易上手的API
  3. Vue是一个构建数据驱动的web界面的库
  4. Vue是一套构建用户界面的渐进式框架
  5. Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
  6. 核心是一个响应的数据绑定系统
  7. 参考文档
  8. 下载链接
  9. 可视化学习

2.第一个应用

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

	  		2. 生产环境版本

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  1. 声明使渲染
    1. Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
</head>
<body>
    <!-- Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： -->

    <div id="app">
    {{ message }}
    </div>
</body>
    <script type='text/javascript'>
        var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
    })
    </script>
</html>

3.data

  1. 数据绑定最常见的形式就是使用 "Mustache(胡子)“ 语法（双大括号）的文本插值
<span>{{message}}</span>
  1. Mustache 标签将会被替代为对应数据对象上的message属性的值，无论何时绑定的数据对象上message属性发生改变，插值处的内容都会更新
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="app1">
        <a href="#">{{ message }}</a>
        <span>{{data1}}</span>
    </div>
</body>
<script type="text/javascript">
    // 创建实例
    var ve = new Vue({//注意大写
        el: '#app1',//定位标签
        data:{
            message:'领取福利',
            data1:'Python'
        }
    })
</script>
</html>

4.v-bind(绑定数据)

<body>
    <div id="app1">
        <a href="#">{{ message }}</a>
        <span>{{data1}}</span>
        <hr>
        <a v-bind:href="url">跳转</a>
        <hr>
        <!-- v-bind简写 -->
        <span :title='showmessage'>鼠标悬停查看时间</span>
    </div>
</body>
<script type="text/javascript">
    // 创建实例
    var ve = new Vue({//注意大写
        el: '#app1',//定位标签
        data:{
            message:'领取福利',
            data1:'Python',
            url:'https://www.baidu.com/',
            showmessage:'当前时间：'+new Date().toLocaleDateString()
        }
</script>

5.v-if

通过条件指令可以控制元素的创建（显示）或销毁(隐藏)

v-if ,v-else-if ,v-else,v-show

<!-- v-if -->
        <span v-if='islog'>欢迎来到此世界</span>
        <span v-if='leve===0'>男</span>
        <span v-else-if='leve===1'>女</span>
        <span v-else>输入错误</span>
        <hr>
        <!-- v-if v-show -->
        <span v-if='see'>v-if</span>
        <span v-show='see'>v-show</span>
    </div>
</body>
<script type="text/javascript">
    // 创建实例
    var ve = new Vue({//注意大写
        el: '#app1',//定位标签
        data:{
            message:'领取福利',
            data1:'Python',
            url:'https://www.baidu.com/',
            showmessage:'当前时间：'+new Date().toLocaleDateString(),
            // islog:false,
            islog:true,
            // leve:1,
            leve:3,
            see:false,
        }
 </script>

v-show用法与v-if大致一样，但它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的，而v-if会消失
注意在Vue中使用v-show,原来的css代码不能设置display属性，会导致冲突

6.v-for(列表渲染)

v-for指令可以绑定数组的数据来渲染一个项目列表
v-for指令需要使用item in items 形式的特殊语法，items是源数据数组且item是数组元素迭代的别名

 <!-- v-for 列表渲染 -->
        <ul>
            <li v-for='(item,index) in items'>{{index+1}}--{{item}}</li>
        </ul>
        <!-- 对对象进行遍历 -->
        <ul>
            <!-- item是value值 -->
            <li v-for='item in objects'>{{item}}</li>
            <li v-for='(value,key) in objects'>{{key}}--{{value}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for='item in datas'>{{item.id}} {{item.name}} {{item.age}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    // 创建实例
    var ve = new Vue({//注意大写
        el: '#app1',//定位标签
        data:{
            message:'领取福利',
            data1:'Python',
            url:'https://www.baidu.com/',
            showmessage:'当前时间：'+new Date().toLocaleDateString(),
            // islog:false,
            islog:true,
            // leve:1,
            leve:3,
            see:false,
            items:['python','mysql','linux','html','js','css'],
            objects:{
                id:'1号',
                name:'python',
                age:'12',
            },
            datas:[
                {
                id:'1号',
                name:'python',
                age:'12'
                },
                {
                id:'2号',
                name:'java',
                age:'10',
                },
            ],
        }

    })
</script>

7.methods(事件)

v-on指令监听DOM事件，并在触发时运行一些javaScript代码

 <div id='app'>
        <!-- v-on 绑定方法 -->
        <button v-on:click='login'>登录</button>
        <!-- v-on 简写 @click -->
        <a href="javascrpit:;"@click='register'>注册</a>
        <hr>
        <!-- 带参数的函数 -->
        <span>{{this.total}}</span>
        <button @click='add(counter)'>点击+1</button>
    </div>    
    </body>
    <script type="text/javascript">
        var ve=new Vue({
            // 接管标签
            el: '#app',
            // 绑定数据
            data:{
                counter:1,
                total:0
            },
            // 方法
            methods:{
                login:function(){
                    alert('我被点击了！')
                },
                register:function(){
                    alert('注册！')
                },
                add:function(num){
                    // this表示当前的vue,通过this.来获取data中的变量
                    this.total+=num
                    alert(this.total)
                }
            }
        })
 </script>

8.v-model(绑定数据)

model表单输入绑定(双向绑定数据)
单行文本框，多行文本框， 单选框， 多选框，下拉框
可以用v-model指令在表单 《input》，《textarea》及《select》元素上创建双向数据绑定，他会根据控件控件类型自动选取正确的方法来更新元素，尽管有哪些神奇，它负责监听用户的输入事件以更新数据，并对一些极端场景进行特殊处理。
v-model 会忽略所有表单元素的value,checked,delected特性的初始值而总是将Vue实例的数据作为数据来源，应该通过javascript在组件的data选项中声明初始值

<body>
    <div id='app'>
        <span>{{message}}</span>
        <hr>
        <table>
            <tr>
                <td>用户名</td><td><input type="text" name='username' v-model='username'></td>
            </tr>
            <tr>
                <td>密码</td><td><input type="password" name='password1' v-model='password1'></td>
            </tr>
            <tr>
                <td>确认密码</td><td><input type="password" name='password2' v-model='password2'></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    男 <input type="radio" name='sex' value='boy' v-model='sex'>
                    女 <input type="radio" name='sex' value='girl' v-model='sex'>
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    足球 <input type="checkbox" name='like' value='足球' v-model='like'>
                    篮球 <input type="checkbox" name='like' value='篮球' v-model='like'>
                </td>
            </tr>
        </table>
        <button v-on:click='register'>注册</button>
    </div>
</body>
<script type="text/javascript">
// 创建vue实例
    var vm=new Vue({
        el:'#app',
        data:{
            message:'hello',
            username:'',
            password1:'',
            password2:'',
            sex:'',
            like:[],
        },
        methods:{
            register:function(){
                alert(this.username+this.password1+this.password2+this.sex+this.like)
            }
        }
    })
</script>

9.todolist案例

<body>
    <!-- 定义标签 -->
    <div id='app'>
    <input type="text" name='todoitem' v-model='newitem'><button @click='add'>添加</button>
    <hr>
    <ul>
        <li v-for='(item,index) in items'>
           <a href='javascript:;' @click='up(index)'>↑</a> {{item}} <a href='javascript:;' @click='deleteitem(index)'>删除</a> <a href='javascript:;' @click='down(index)'>↓</a>
        </li>       
    </ul>
</div>
</body>
<!-- 初始化vue -->
<script>
    var vm=new Vue({
        // el 接管html
        el:'#app',
        // data 绑定数据
        data:{
            message:'python',
            items:['html','python','mysql'],
            newitem:'',
        },
        // 绑定事件
        methods:{
            add:function(){
                this.items.push(this.newitem)
            },
            deleteitem:function(index){
                // alert(index)
                this.items.splice(index,1)
            },
            up:function(index){
                //1. 获取当前元素
                current=this.items[index]
                // 2.先把当前的元素删除
                this.items.splice(index,1)
                // 3.再添加，添加的时候让索引-1
                // array.splice(index(位置), howmany(删除个数), item1, ....., itemX(添加元素))
                this.item.splice(index-1,0,current)
            },
            down:function(index){
                //1. 获取当前元素
                current=this.items[index]
                // 2.先把当前的元素删除
                this.items.splice(index,1)
                // 3.再添加，添加的时候让索引+1
                this.item.splice(index+1,0,current)
            },

        }
    })
</script>

10.ES6语法

  1. ES6初识
    1. ES6是javaScript语言的新版本，它也可以叫做ES2015，之前学习的javaScript属于ES5，ES6在它的基础上增加了一些语法，ES6表示javaScript的趋势，而且vue组件开发中使用很多的ES6语法，所以掌握这些常用ES6语法是必须。
    2. 参考文档
    3. 箭头函数

11.Vue实例生命周期

在这里插入图片描述

<script>
    // 3.创建Vue实例
    var vm=new Vue({
        el:'#app',
        data:{
            message:'python'
        },
        // 生命周期的钩子（函数）没有在methods
        // vm对象实例化之前
        beforeCreate:function(){
            console.log('beforeCreate')
        },
        // vm对象实例化之后
        created:function(){
            console.log('created')
        },
        // vm将作用标签之前
        beforeMount:function(){
            console.log('beforeMounted')
        },
        // vm将作用标签之后
        mounted:function(){
            console.log('mounted')
        },
        // 数据或者属性更新之前
        beforeUpdate:function(){
            console.log('beforeUpdate')
        },
        // 数据或属性更新之后
        updated:function(){
            console.log('updated')
        },
        // 数据销毁之前
        beforeDestroy:function(){
            console.log('beforeDestroy')
        },
        // 数据销毁之后
        destroyed:function(){
            console.log('destroyed')
        },
  
    })
   
</script>

12.axios发送ajax请求

  1. Vue不能发送ajax请求，需使用vue-resource(vue1.0版本)，axios(vue2.0版本)等插件实现
  2. axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue.2.0官方推荐，同时不再对vue-resource进行更新与维护
  3. 参考文档
  4. 使用axios发送AJAX请求
    1. 安装：
      1. npm install axios -S 直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dlist中
      2. 网上直接下载axios.main.js文件
      3. 通过script src的方式进行文件的导入
  5. 准备工程
    1. 创建一个djagno工程，如login,创建完成之后再创建一个子应用，如user,最后设置模板文件
#views.py
#-----------------
from django.shortcuts import render
from django.views import View
import json
from django.http import JsonResponse
# Create your views here.
class LoginView(View):
    def get(self,request):
        return render(request,'login.html')
    def post(self,request):
        pass
class ReceiveView(View):
    def get(self,request):
        #1.接收参数
        data=request.GET
        username=data.get('username')
        password=data.get('password')
        return JsonResponse({'info':{'username':username}})
    def post(self,request):
        # data = request.POST
        data=json.loads(request.body.decode())
        username = data.get('username')
        password = data.get('password')
        return JsonResponse({'info': {'username': username}})


login.html
-----------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<!-- 1.导入vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
{#    导入 axios#}
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- 2.定义一个 标签 需要给一个标签添加 id -->
<div id="app">
{#    vue的大胡子语法 和 django/flask的模板语法 冲突了#}
	<span>[[message]]</span>
    <button @click="login">登陆</button>

    <hr>
    [[username]]

    <hr>
    <button @click="login2">post</button>
</div>



</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
        delimiters:['[[',']]'],
		data:{
			message:'人生苦短',
            username:''
		},
        methods:{
		    login:function(){
		        alert('走了吗？')
{#		        这里发送axios#}
                var url = 'http://127.0.0.1:8000/rece/?username=Python&password=123'
{#                then catch 用 => 箭头函数 this #}
                axios.get(url).then((response)=>{
{#                    response(相应) --> response.data(返回数据) --> #}
                    console.log(response.data.info.username)
                    this.username=response.data.info.username
                }).catch( (error)=>{
                    console.log(error)
                } )
            },

            login2:function(){

{#		        axios.post().then().catch()   #}
{#                then 成功的回调 catch 失败的回调#}
                let url = 'http://127.0.0.1:8000/rece/';
		        axios.post(url,{
		            'username':'Python post',
                    'password':'123'
                }).then((response)=>{
		            console.log(response.data.info.username)
                    this.username=response.data.info.username
                }).catch((error)=>{

                })
            }
        }
	})
</script>
</html>

  • 不需要别人给予，你想要的触手可及
风姿--惊鸿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
组件逻辑系列—$showmessage弹出消息组件方法（第一版）
weixin_46317555的博客
04-25 324
弹出消息组件方法($showmessage) 第一版 4月25日 17:30 组件逻辑 #mermaid-svg-fvWk3ReAZxm24nXw .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-fvWk3ReAZxm24nXw .label text{fill:#333}#mermaid-svg-fvWk3Re
vue 项目初识 路由 router.md
06-11
vue 项目初识 路由 router 并进行初步配置以及简单的组件实现，初学vue router可以参考
vue中的this指向问题
wangzhen12138的博客
04-02 736
<script type="text/javascript"> var message = "Hello!"; var app = new Vue({ el:"#app", data:{ message: "你好！" }, created: function() { this.showMessage1(); //this 1 this.showM.
Web-------提示对话框-----ShowMessage(strMsg,toUrl)
---------------阿谢—————『flyxiaoye』----------
12-25 437
                       基本原理用到了   meta   http-equiv="Refresh"   content="5;   url=" toUrl" >   content 5 表示5秒后对 页面刷新一次  页面的链接为 toUrlfunction show_msg($msg_body, $url=){    global $AUTHMENU,
vue 事件总线的用法（EventBus）
llj1028的博客
02-14 808
vue事件总线（EventBus）的使用
Vue入门(一)
m0_63679126的博客
09-04 328
vue入门
01vue初识_vue_principle9nn_
10-03
"01vue初识_vue_principle9nn_" 涉及的是Vue的基础应用部分，这通常包括Vue的核心概念、安装、基本结构以及一些基础的指令和API。 1. **Vue核心概念**： - **数据绑定**：Vue的核心特性之一是双向数据绑定，通过`v...
初识Vue.html
07-29
初识Vue.html
详解Vue爬坑之vuex初识
08-30
Vue.js 是一款流行的前端框架，用于构建用户界面。在开发大型 Vue 项目时，随着组件数量的增加，组件间的数据传递成为一个挑战。Vue 的状态管理工具 Vuex 提供了一个集中式的存储解决方案，使得在子组件之间共享和...
vue-community
04-03
2. **README.md**：这个文件会提供项目的基本信息、安装指南、使用方法、贡献指南等，是初识项目的重要入口。 3. **LICENSE**：文件规定了项目使用和分发的法律条款，常见的有MIT、Apache 2.0等。 4. **package....
前端开发Vue基础篇：Day01 初识Vue.pdf
11-08
前端开发Vue基础篇Day01资料文档
初识 Vue.js 中的 *.Vue文件
11-27
什么是Vue.js？ vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。（自底向上设计方法是根据系统功能要求，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过...
初识简单却不失优雅的Vue.js
01-21
作为一名Vue.js的忠实用户，我想有必要写点文章来歌颂这一门美好的语言了，我给它的总体评价是“简单却不失优雅，小巧而不乏大匠”，下面将围绕这句话给大家介绍Vue.js，希望能够激发你对Vue.js的兴趣。  Vue.js...
22-09-17-01_vue3_demo(初识视图文件（.vue）)
09-18
在vue前台渲染显示项目中，App.vue视图文件是其它vue视图文件根视图文件，或者也可以称为父视图文件，即其它视图文件的渲染显示都必须需要直接或都间接依赖于App.vue视图文件。其它vue视图文件按照功能可分为：1、...
Vue基础知识点加案例
shuaigelingzi的博客
09-19 667
Vue入门笔记基础篇Vue基础知识点el:挂载点data:数据对象本地应用v-text: 设置标签的文本值(textContent)v-html:设置标签的innerHTMLv-on:为元素绑定事件计数器--案例v-show:根据表达式的真假，切换元素的显示和隐藏v-if:根据表达值的真假，切换元素的显示和隐藏(操纵dom元素)v-bind:设置元素的属性(比如:src,title,class)实例-图片切换v-forv-on（补充）:传递自定义参数，事件修饰符 基础篇 Vue基础知识点 el:挂载点 e
Vue的基本组件2(show,bind)
jakelihua
10-10 273
本文旨在用最短的篇幅和例子，代入大家入门vue,也是本博主的一个学习记录，本文主要介绍的组件有，v-bind,v-show
Vue3全局提示（Message）
最新发布
Mr Dear的博客
03-17 6714
调用一次只展示一个提示，调用多次则依次展示多个，按照调用先后顺序依次自动关闭，功能丰富，简单易用，满足你的所有幻想😁
vue学习笔记（1）之初识vue
肿肿的博客
01-10 415
Day1-初识vue1、什么是vue？官方解释自我认识2、vue的安装3、vue中的MVVM什么是MVVM？（1）MVVM的定义？（2）计数器的MVVM4、创建Vue实例传入的options5、Vue的生命周期生命周期钩子生命周期图示 1、什么是vue？ 官方解释 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的
"Vue3初识与后端部署：App.vue根视图文件与Swagger实现
第1章 初识视图文件（*.vue） 1 根视图文件：App.vue 在Vue前台渲染显示项目中，App.vue视图文件是其他Vue视图文件的根视图文件，也可以称为父视图文件。所有其他视图文件的渲染显示都必须直接或间接依赖于App.vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值