Vue简单快速上手 idea版

最新推荐文章于 2024-04-18 11:36:09 发布

VIP文章别卷了球球了

最新推荐文章于 2024-04-18 11:36:09 发布

阅读量1.4k

点赞数

分类专栏： FrameWorkStudy 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43585249/article/details/121431871

版权

文章目录

版本
插件安装和通过CDN使用Vue
Vue的基本语法
组件
Axios异步通信
Vue的生命周期
计算属性、内容分发、自定义事件
第一个vue-cli项目
vue-router路由
实战快速上手-ElementUI

版本

基于狂神说：https://www.bilibili.com/video/BV18E411a7mC?p=19
Vue 2.x ：Vue2.x官方文档

插件安装和通过CDN使用Vue

idea要使用Vue需要：

File->Settings->Plugins 搜索Vue 安装Vue插件

如果插件市场无法访问的话可以看：解决IDEA插件市场无法访问
用CDN导入使用

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

简单例子

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

</head>
<body>
<!--view层 模板-->
<div id="app">
    <h2>{
  {message}}</h2>
</div>

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

在这里插入图片描述

Vue的基本语法

v-bind

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

</head>
<body>
<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

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

在这里插入图片描述

你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = ‘新消息’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

条件判断

v-if
v-else-if
v-else

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
   <h1 v-if="ok">Yes</h1>
   <h1 v-else>No</h1>
  
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
   var vm = new Vue({
     
       el:"#app",
       /*Model：数据*/
       data:{
     
           type: true
       }
   });
</script>
</body>
</html>

测试：
1.在浏览器上运行，打开控制台!
2.在控制台输入vm.ok=false然后回车，你会发现浏览器中显示的内容会直接变成NO
注：使用v-*属性绑定数据是不需要双花括号包裹的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <h1 v-if="type==='a'">A</h1>
    <h1 v-else-if="type==='b'">B</h1>
    <h1 v-else>C</h1>
</div>

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

注：===三个等号在JS中表示绝对等于(就是数据与类型都要相等)
测试：
在这里插入图片描述

循环

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

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

<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
     
        el:"#app",
        data:{
     
            items:[
                {
     message:'三国演义'},
                {
     message:'红楼梦'},
                {
     message:'水浒传'},
                {
     message:'西游记'}]
        }
    });
</script>
</body>
</html>

注：items是数组，item是数组元素迭代的别名。Thymeleaf模板引擎的语法和这个十分的相似！
测试：在控制台输入vm.items.push({message:‘java’})，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条Java.
在这里插入图片描述

监听事件

v-on监听事件
emsp;事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件，可以绑定到Vue中的methods中的方法事件!

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

</head>
<body>
<!--view层 模板-->
<div id="app">
    <button v-on:click="sayHi">click</button>
</div>

<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
     
        el: "#app",
        data: {
     
            message: "Hi Vue"
        },
        methods: {
     //方法必须定义在Vue 的method对象中
            sayHi: function () {
     
                alert(this.message);
            }

        }
    });
</script>
</body>
</html>

在这里插入图片描述
Vue还有一些基本的使用方式，大家有需要的可以再跟着官方文档看看，因为这些基本的指令几乎我们都见过了，使用方法都基本差不多。

表单双绑

1、什么是双向数据绑定

Vue.js是一个MV VM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。
为什么要实现数据的双向绑定
在Vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

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

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!
单行文本:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset

最低0.47元/天解锁文章

别卷了球球了

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue简单快速上手 idea版

文章目录
复制链接

扫一扫

专栏目录