初识vue

最新推荐文章于 2020-03-10 15:14:11 发布

MR_非凡

最新推荐文章于 2020-03-10 15:14:11 发布

阅读量145

点赞数

分类专栏： ajax，认识vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44411569/article/details/87160902

版权

ajax，认识vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue

我们先认识一下什么是vue？其实就是用来构建用户界面的渐进式框架，vue指令就是操作DOM命令而准备的。安装或引用vue你也可以查开发文档

先来使用vue输出一个简单的hello word

<!DOCTYPE html>
<html>
<head>
     <title>vue</title>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
       {{ mes }}
</div>
<script>
      var app = new Vue({
          	el : "#app",
          	data : {
               mes : "hello vue"
          }
      })
</script>
</html>

{{ }} 这里边keyixie可以写输出格式也可以写yixiejiande一些简单的js语法例如：

<!DOCTYPE HTML>
<html>
<head>
     <title>vue</title>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
       {{ age>18? "成年人" : "未成年"}}
</div>
<script>
      var app = new Vue({
            el : "#app",
            data : {
                  age : "20"
            }
      })
</script>
</html>

也可以写函数

<!ODCTYPE HTML>
<html>
<head>
        <title>vue</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
       {{  getAge() }}
</div>
<script>
      var app = new Vue({
            el : "#app",
            data : {
                  age : "20"
            },
            methods :{
                  getAge : function(){
                  return this.age>18? "成年人" : "未成年"
           }
          }
      })
</script>
</html>
数据绑定      //Vue指令语法： v-指令名字+ ：+指令参数 = 指令表达式

当然也少不了跳转啦

<!DOCTYPE HTML>
<html>
<head>
        <title>vue</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
         <!--<a href="{{ url }}">跳转到百度</a>// 这样是不能实现的 他会把他当成字符串进行解析-->
        <a v-bind:href="url"></a>
</div>
<script>
      var app = new Vue({
            el : "#app",
            data : {
                  url  : "https://www.baidu.com"
            }
      })
</script>
</html>