js 取对象的第一个属性_Vue.js（一）-CSDN博客

第一章知识储备

javascript

HTML

CSS

第二章介绍

Vue是一套用于构建用户界面的渐进式框架。其特点是易用、灵活、性能最省。注意的是：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

安装：https://cn.vuejs.org/js/vue.js

第三章 Vue实例化创建对象

<body>
    <div id="app">
        
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // 实例化Vue函数对象
    var app = new Vue({
    
        // 根据id属性值查找目标节点对象
        el: '#id属性值',
        // 数据获取
        data:{
    
            // 在这里放所需数据
        },
        // 函数方法
        methods:{
    

        }
    })
</script>

第四章模板语法

1、差值表达式：利用“{ {}}”将值展示在html页面中。


<body>
    <div id="app">
        <!--① 显示第一个值 -->
        {
    {a}}
        <!-- ②可以返回函数 -->
        <br>
        {
    {b()}}
        <!-- ③可以使用运算符 -->
        <br>
        {
    {c+d}}
        <!-- ④三元运算符 -->
        <br>
        {
    {e>f?"d大":"f大"}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // 实例化Vue函数对象
    var app = new Vue({
    
        // 根据id属性值查找目标节点对象
        el: '#app',
        // 数据获取
        data:{
    
            // 在这里放所需数据
            // ①显示到页面中
            a:"我是显示的第一个值",
            // ②可以返回函数
            b:function(){
    
                return "我是返回的函数"
            },
            // ③可以使用运算符 
            c:1,d:2,
            // ④三元运算符
            e:5,f:10
        }
    })
</script>

3、指令

v-text：将数据内容原样显示到页面中

<body>
    <div id="app">
        <p v-text="a"></p>
        <p v-text="b"></p>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // 实例化Vue函数对象
    var app = new Vue({
    
        // 根据id属性值查找目标节点对象
        el: '#app',
        // 数据获取
        data:{
    
            a:"v-text将文本内容原样显示在页面中",
            b:"<s>v-text</s>"
        }
    })
</script>

v-html：功能与innerHTML同等

<body>
    <div id="app">
        <p v-html="a"></p>
        <p v-html="b"></p>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // 实例化Vue函数对象
    var app = new Vue({
    
        // 根据id属性值查找目标节点对象
        el: '#app',
        // 数据获取
        data:{
    
            a:"v-html",
            b:"<s>v-html</s>"
        }
    })
</script>

v-show：显示隐藏

<body>
    <div id="app">
        <!-- 值为true显示标签 -->
        <p v-show="a">123</p>
        <!-- 值为false影藏标签 -->
        <p v-show="b">456</p>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // 实例化Vue函数对象
    var app = new Vue({
    
        // 根据id属性值查找目标节点对象
        el: '#app',
        // 数据获取
        data:{
    
            a:true,
            b:false
        }
    })
</script>

v-if，v-else，v-else-ifÿ

js 取对象的第一个属性_Vue.js（一）

第二章 介绍

第三章 Vue实例化创建对象

第四章 模板语法

第二章介绍

第四章模板语法