Vue基本语法

最新推荐文章于 2024-02-04 14:52:21 发布
最新推荐文章于 2024-02-04 14:52:21 发布
阅读量440 收藏 5
点赞数 3
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53374893/article/details/132520812
版权

1.Vue的基本语法

1.1 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>


<!-- 1.导入Vue.js   -->
<script src="../js/vue.js"></script>
<script>
      var vm = new Vue({
            el:"#app",
          //Model:数据
            data:{
                message:"hello,vue!"
            }
      });


</script>

</body>
</html>

1.2 v-if ,v-else ,v-else-if

 

<!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-if="type==='D'">D</h1>
        <h1 v-else>C</h1>
<!--各自绑定，从if开始-->
    <h1 v-if="demo==='A'">A</h1>
    <h1 v-else-if="demo==='B'">B</h1>
    <h1 v-else-if="demo==='D'">D</h1>
    <h1 v-else>G</h1>
</div>


<!-- 1.导入Vue.js   -->
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model:数据
        data:{
            type: 'A',
            demo:'B'
        }
    });


</script>


</body>
</html>

 1.3 v-for

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

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

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

</div>


<!-- 1.导入Vue.js   -->
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model:数据
        data:{
          items: [
              {message: '狂神说Java'},
              {message: '狂神说前端'},
              {message: '狂神说运维'}

          ]
        }
    });


</script>

</body>
</html>

 

2.vue事件绑定 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
        <button v-on:click="sayHi">click me</button>
</div>


<!-- 1.导入Vue.js   -->
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model:数据
        data:{
        message: "狂神说Java"
        },
        methods:{//方法必须定义在Vue的Methods对象中,事件
            sayHi: function (){
                alert(this.message);
            }

        }
    });


</script>

</body>
</html>

 3.Vue的双向绑定

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   输入的文本: <input type="text" v-model="message">  {{message}}
</div>


<!-- 1.导入Vue.js   -->
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model:数据
        data:{
            message:"hello,vue!"
        }
    });


</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   输入的文本: <input type="text" v-model="message">  {{message}}
    <br>
    输入的文本: <textarea name="" id="a" cols="30" rows="10" v-model="message"></textarea>{{message}}
    <br>
    <br>
 性别   <input type="radio" name="sex" value="男" v-model="jmj" >男
    <input type="radio" name="sex" value="女" v-model="jmj">女

    <p>
        选中了谁 {{jmj}}
    </p>


    <select name="" id="s" v-model="selct">
        <option value="" disabled>---请选择---</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
   select: {{selct}}

</div>


<!-- 1.导入Vue.js   -->
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model:数据
        data:{
            message: "hello,vue!",
            checked: true,
            jmj: '',
            selct: ''
        }
    });


</script>

</body>
</html>

 

4.Vue组件 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--   组件: 传递给组件中的值     -->
    <jmj v-for=" item in items" v-bind:qin="item"></jmj>
</div>


<!-- 1.导入Vue.js   -->
<script src="../js/vue.js"></script>
<script>
//定义一个Vue组件 component
    Vue.component("jmj",{//jmj表示组件名字，也就是标签名
        props: ['qin'],//qin是bind绑定的一个参数，将item对象传递进来
        template: '<li>{{qin}}</li>'
    });


    var vm = new Vue({
        el:"#app",
        //Model:数据
        data:{
            items: ["java","linux","前端"]
        }
    });


</script>

</body>
</html>

 

 

 

 5.Axios异步通信

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  v-clock: 解决闪烁问题  -->
    <style>
        [v-clock]
    </style>
</head>
<body>
<div id="vue" v-cloak>
        <div>{{info.name}}</div>
        <div>{{info.address}}</div>
    <a v-bind:href="info.url">框</a>
</div>


<!-- 1.导入Vue.js   -->
<script src="../js/vue.js"></script>
<!--axios-->
<script src="../js/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#vue",
       //data:属性 :vm
        data(){
            return{
                // 请求的返回参数格式，必须和json字符串一样
                info:{
                    name: 'a',
                    address:{
                         strget: null,
                        city: null,
                        country: null
                    },
                    url: null

                }
            }
        },
       mounted(){//钩子函数,链式编程 ,ES6新特性
            axios.get('../data.json').then(response=>(
                vm.info= response.data
            ));
       }
    });


</script>

</body>
</html>

 

荭色海湾
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue的基础语法
China_11111的博客
03-21 779
一、Vue的概念 1.什么是vue.js 1、Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 2、Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ 二、MVC与MVVM的区别 1、MVC 是后端的分层开发概念; 2、MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为
Vue基础语法
qq_52262541的博客
04-10 1099
Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{XXX}}，XXX是Js表达式，且可以直接读取到date中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签内容、绑定事件…）。 举例：v-bind:href=“XXX” 或简写为：href=“XXX”,XXX同样要写js表达式，且可以直接读取到date中的所有属性。 备注：Vue中有很多的指令，且形式都是：v-???,此处我们只是拿v-bind举个例子。 Vue中有2种数据绑定的方式： 1.单向绑定
vue基础语法
若有所执，必有所成，心之所向，必显光芒
07-04 596
内容渲染指令，属性绑定指令，事件绑定，事件修饰符，按键修饰符，双向绑定，列表渲染，v-for语法
vue基本语法总结大全
最新发布
xueluoyouying的博客
02-04 1694
vue基本语法总结
vue基本语法
qq_62087717的博客
04-16 3641
1、插值表达式 {{ 、、、 }} 大括号中可以写变量名，对象.属性等，还可以写入js语句 2.变量显示在界面上 v-text： v-html： 两者的区别v-text把内容当纯文本处理，v-html遇到html的标签会当html代码处理 如： v-text: v-html: 3.v-moldel实现双向动态绑定 data:{ username: “” ​ } 当username改变时，页面上的username也会动态改变 页面上的username改变时，data中的us
Vue基础语法知识（自用，完整版）
m0_62068678的博客
09-12 8779
vue基础语法、尚硅谷、欢迎交流
Vue知识（一）Vue基础语法
热门推荐
果子哥丶的博客
05-05 1万+
Vue是一个渐进式的框架，什么是渐进式的呢？ - 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 - 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。 - 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
前端——Vue基础语法
温良
07-27 421
Vue介绍 Vue是一套构建用户界面的渐进式前端框架。 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。 特点 易用：在有HTMLCSSJavaScript的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。 Vue的使用 下载和引入vue.js文件。 编写入门程序。
VUE基本语法
蔡茂的博客
05-19 796
文章目录一.什么是VUE二.VUE基本语法2.1 Vue的基本使用2.2 el2.3 data2.4 methods三.VUE表达式四.VUE的指令v-text,v-htmlv-forv-bind: 绑定属性v-model: 数组双向绑定v-show:展示与隐藏v-if:判断v-on:注册事件五.VUE组件5.1 全局组件5.2 局部组件 一.什么是VUE 渐进式的Javascript框架 MV...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue基础语法练习源码
12-09
本套资源，是在html文件中测试的一些vue基础语法，包括过滤器、定义插件、列表渲染等语法。此资源适用于初学vue的小伙伴，用于加深对vue语法的熟悉。
从Vue基础语法入手
08-10
从Vue基础语法入手，逐层递进，项目贴近企业流程，完全按照企业级别代码质量和工程开发流程进行，让你理解这套技术在企业中被使用的真实流程。更好的掌握Vue各个基础知识点。
vue基本语法综合案例
08-09
vue基本语法综合案例
vue基本语法讲解.pdf
05-11
vue基本语法讲解.pdf
前端框架Vue基础语法笔记
01-20
前端框架Vue基础语法笔记
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
vue语法.rar
08-16
六、Vue-router路由的基本使用上 在一个系统或App中，由多个页面组成，通常会使用vue中的组件来实现，那么从一个页面跳转到另一个页面时， 通过url路径来实现的，哪个url对应哪个页面，在vue中是通过vue-router来...
又一款MVVM组件 Vue基础语法和常用指令（1）
11-29
前言：关于Vue框架，好几个月之前就听说过，了解一项新技术之后，总是处于观望状态，一直在犹豫要不要系统学习下。正好最近有点空，就去官网了解了下，看上去还不错的一个组件，就抽空研究了下。最近园子里vue也确实...
vue基本语法思维导图
08-26
请注意，以上只是Vue基本语法的思维导图，具体的语法细节和用法请参考官方文档或相关教程。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* [vue（框架 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值