vue 快速入门

最新推荐文章于 2024-07-28 16:17:13 发布

lucien_ma

最新推荐文章于 2024-07-28 16:17:13 发布

阅读量297

点赞数

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

本文链接：https://blog.csdn.net/lucien_ma/article/details/120959176

版权

这篇博客详细介绍了Vue.js的基础知识，包括如何创建第一个Vue程序、基本语法（如if-else、for循环）、事件绑定、数据双向绑定、组件、Axios异步通信、Vue Router的使用以及Vue CLI项目搭建。还涵盖了Webpack配置、路由嵌套和参数传递等内容，是Vue初学者的全面指南。

摘要由CSDN通过智能技术生成

Vue

Soc：关注度分离原则

HTML+ CSS + JS: 视图：给用户看，刷新后台给的数据

网络通信：axios

页面跳转：vue-router

状态管理：vuex

Vue-UI：ICE

前端的打包工具：webpack

NPM：项目综合管理工具，类似于 maven

我的第一个 vue 程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {
  {message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
     
        el: '#app',
        data: {
     
            message: "hello vue!"
        }
    });
</script>
</body>
</html>

也可以使用 v-text、v-bind:等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒即可查看此处动态绑定的提示信息
    </span>
</div>

<div id="app2">
    <span v-text="message">

    </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
     
        el: '#app',
        data: {
     
            message: "hello vue!"
        }
    });

    var vm2 = new Vue({
     
        el: '#app2',
        data: {
     
            message: "我是 app2"
        }
    });
</script>
</body>
</html>

Vue 基本语法

if-else

html

<div id="app2">
    <h1 v-if="type === 'A'">A</h1>
    <h1 v-else-if="type === 'B'">B</h1>
    <h1 v-else>C</h1>
</div>

javascript

var app2 = new Vue({
   
    el: '#app2',
    data: {
   
        type: 'A'
    }
});

for

html

<div id="app">

    <li v-for="item in items">
        {
  {item.message}}
    </li>

</div>

javascript

var app = new Vue({
   
    el: '#app',
    data: {
   
        items: [
            {
   message: 'Java'},
            {
   message: 'Vue'},
            {
   message: 'Spring'}
        ]
    }
});

还可以拿到下标

<div id="app">

    <li v-for="(item,index) in items">
        {
  {item.message}}==>{
  {index}}  <!-- index 为数组下标，也可以不要 -->
    </li>

</div>

Vue 绑定事件

html

<div id="app">
    <button v-on:click="sayHi">click Me</button>
</div>

javascript

var app = new Vue({
   
    el: '#app',
    data: {
   
        message: '学习 Vue 的第二天！'
    },
    methods: {
    // 方法必须定义在 Vue 的 Method 对象中
        sayHi: function () {
   
            alert(this.message);
        }
    }
});

Vue 双向绑定

什么是数据双向绑定？

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化时候，视图也就会发生变化，当视图发生变化的时候，数据也会跟着同步变化

在表单中使用双向数据绑定

可以用 v-model指令在表单 <input>,<textarea>,<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法更新元素，尽管有些神奇，但 v-model 本质上是负责监听用户的输入事件以更新数据，并对一些极端场景进行特殊处理。

普通表单数据双向绑定

html

<div id="app">
    输入的文本：<input type="text" v-model="message">
    <p>{
  {message}}</p>
</div>

javascript

var app = new Vue({
   
    el: '#app',
    data: {
   
        message: ''
    }
});

当我们在 input 框中输入数据时，在下方会同步显示数据

单选框数据双向绑定

html

<div id="app2">
    性别：
    <input type="radio" name="sex" value="男" v-model="sex">男
    <input type="radio" name="sex" value="女" v-model="sex">女
    <p>
        选中了：{
  {sex}}
    </p>
</div>

javascript

var app2 = new Vue({
   
    el: '#app2',
    data: {
   
        sex: ''
    }
});

下拉框数据双向绑定

html

<div id="app3">

    <select v-model="selected">
        <option value="

最低0.47元/天解锁文章

lucien_ma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录