Vue起步

最新推荐文章于 2024-09-14 09:50:15 发布

Yszlocal@

最新推荐文章于 2024-09-14 09:50:15 发布

阅读量61

点赞数

分类专栏：前端学习文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_58842324/article/details/117752431

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue起步

构建构造体

new Vue({
    //选项
})

new Vue({
            el:"#app",
            data:{
                mes:"123"
            }
        })

构造器中的el参数，为DOM中的id元素。这样就可以选择到相对应的div标签内。
data用于定义属性,等于给变量赋值的过程。
methods用来定义函数的返回值。
{{}}用来输出对象属性和函数返回值。
例如：

<body>
    <div id="person">
        <h1>姓名:{{name}}</h1>
        <h1>年龄:{{age}}</h1>
        <h1>{{details()}}</h1>
    </div>
    <script>
        new Vue({
            el:'#person',
            data:{
                name:"杨绍张",
                age:"20"
            },methods:{
                details:function(){
                    return this.name+"这是起步！";
                }
            }
        })
    </script>
</body>

Vue模板语法

插值，数据绑定。使用{{…}}。

<h1>姓名:{{name}}</h1>
<h1>年龄:{{age}}</h1>
<h1>{{details()}}</h1>

使用v-html指令，用于把js中的html代码输出。

    <div id="app">
        <div v-html='mess'></div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                mess:'<h1>这是JS中用v-html输出的。</h1>'
            }
        })
    </script>

Vue计算属性

关键字：computed
split() 方法用于把一个字符串分割成字符串数组。
reverse() 方法用于颠倒数组中元素的顺序。
join() 方法用于把数组中的所有元素放入一个字符串。
实现字符串倒序

<body>
    <li>-----------字符串逆序--------------</li>
    <div id="app">
        {{message.split('').reverse().join('')}}
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:"Ysz1"
            }
        })
    </script>
</body>