• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

分享一下Vue基本语法

互联网 diligentman 2小时前 1次浏览

一、vue的介绍

1.想要了解vue,首先就要vue是什么?

   简单来说vue是一个渐进式的框架,那渐进式框架又是什么呢?

渐进式就是可以将Vue作为应用的一部分嵌入其中,带来更丰富的交互体验。

2.Vue有什么特点?

解耦视图和数据、可复用的组件、前端路由技术、状态管理、虚拟DOM等

3.学习 vue的前置条件是什么呢?

零基础学习vue其实并不需要具备类似angular、react或jquery的经验。

但必须具备一定的HTML、CSS、JavaScript基础。

二、vue的安装教程 

1.了解完vue的基本概念,现在可以安装 vue,其实安装vue的方法有很多,在这里我只介绍2个安装方法:

方式一:cdn引入

//开发环境版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生产环境版本
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二:下载

// 开发环境 https://vuejs.org/js/vue.js
// 生产环境 https://vuejs.org/js/vue.min.js

 2.vue的以一个程序

<!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>
</head>
<body>
    <div id="app">
         <!-- mustache语法 又叫胡子语法、插值语法 -->
        <p>{{hao}}</p>
        {{msg}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 实例化
    new Vue({
        //将vue挂载在当前元素下
        el:'#app',
        //存放所需的数据
        data:{
            hao:'你好世界',
            msg:'hello word'
        }
    })
</script>
</html>

3.分享一些vue的模板语法 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
<!-- v-html不仅可以渲染数据,而且可以解析标签 -->
    <div v-html="htmlTxt"></div>
<!-- v-text和{{}}表达式渲染数据,不解析标签 -->
    <div v-text="textTxt"></div>
<!-- 让胡子语法失效,显示应该有的{{}} 内容 -->
    <div v-pre>{{123}}</div>
<!-- 用于在数据渲染之前将标签隐藏,这样用户就看不见胡子语法 -->
    <div v-cloak>hello {{textTxt}}</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      htmlTxt: '<p><strong>我是html</strong></p>',
      textTxt: 'Vue'
    }
  })
</script>
</html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box" v-show='flag'>盒子1</div>
        <div class="box" v-if='ifFlag'>盒子2</div>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            falg: false,
            ifFlag: true
        }
    })
    //v-show 与 v-if 都具有操作显示隐藏的功能,但两者有什么区别呢?
    //1.v-show 控制的是css的display属性
    //2.v-if 通过创建和销毁dom元素实现
    //3.从性能出发,v-show性能更改,v-if会造成性能浪费

    //什么时候使用 v-if 与 v-show?
    //1.当需要频繁切换一个元素的显示隐藏时,使用v-show
    //2.当一次性渲染元素并再也不需要修改时,两者都可
</script>


程序员灯塔
转载请注明原文链接:分享一下Vue基本语法
喜欢 (0)