vuejs简单应用

115 阅读1分钟

学习文档:vuejs.bootcss.com/guide/

vue介绍: 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

vue实例:

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
        <!-- 插值:{{}}      原样输出,不会解析html代码 -->
        <p>{{2+3*4}}</p>
        <!-- 自动计算 -->
        <p v-html="message"></p>
        <!-- v-html  指令    解析html等代码-->
        <p v-bind:title="message">v-bind:title</p>
        
      
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               message:"  <b>this is message</b>"
            }
        })
    </script>
</body>

<html>

实例为vm ,其中插值使用“{{ }}” 。“{{ }}”其中可以计算也可以原样输出,但不会解析代码。v-html 是一种指令 解析html等代码。v-bind 也是一种指令,绑定属性 v-bind:title绑定属性title。

bind和model:

image.png

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 
           v-model
                不需要指定属性名
                双向绑定
            v-bind
                必须指定绑定属性
                单向绑定vm=>属性

         -->
        <input type="text" v-model="val" >
        <input type="text" v-bind:value="val" >
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               val:"文本"
            }
        })
    </script>
</body>

<html>

v-model 不需要指定属性名 双向绑定 v-bind 必须指定绑定属性 单向绑定vm=>属性

v-if和v-show:

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 
        v-show  
             隐藏:display:none   显示:移出display:none样式
        v-if
             隐藏:删除元素(在dom流中)       显示:添加元素     
 
         -->
        <p v-show="show">show</p>
        <p v-if="show">if</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
              show:true 
            }
        })
    </script>
</body>

<html>
    v-show  
         隐藏:displaynone   显示:移出displaynone样式
    v-if
         隐藏:删除元素(在dom流中)       显示:添加元素