初识Vue

最新推荐文章于 2024-07-18 17:37:56 发布

mingjie777

最新推荐文章于 2024-07-18 17:37:56 发布

阅读量178

点赞数 2

分类专栏： node.js 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/mingjie777/article/details/105106396

版权

node.js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍Vue.js，一种用于构建用户界面的渐进式框架。详细讲解了如何在项目中引入和使用Vue，包括通过CDN引入开发环境版本及在项目中下载安装Vue的方法。并通过示例展示了Vue的基本用法，如数据绑定、插值表达式和指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue是什么

Vue是一套用于构建用户界面的渐进式框架。简单来说呢就是Vue是前端框架。

如何来用Vue

如果是想简单方便可以直接引入Vue的开发环境版本即可

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

如果是开发的话建议在项目中下载Vue

npm install vue

这样就可以在项目中直接使用啦

来实现我们第一个Vue的实例吧：首次我用的是引入vue的官方路径也就是上上方的script那句。

<body>
    <div id='app'>
        <h1>{{msg}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    /*vue是数据驱动的框架，不需要开发者操作dom，只需关心数据就可*/
    const vueMsg=new Vue({
    /*el 指定了当前创建的vue实例发挥作用的范围，也就说当前的vue实例只能在id为app的dom范围内生效；具体表现就是当前的data属性中数据只有在id为app的div内部可以使用*/
        el:'#app',
        /* data属性存储着当前vue实例要使用的数据*/
        data:{
            msg:'hello vue'
        }
    })
    </script>

{{}}是什么

{{}}是vue中的模板语法
插值表达式：{{}}，也叫Mustache语法，小胡子语法，因为长得像胡子。

解释：使用 {{}} （插值表达式）从 data 中获取数据，并展示在模板中
说明： {{}} 中只能出现JavaScript表达式
说明：数据对象的属性值发生了改变，插值处的内容都会更新

<body>
    <div id="app">
        <!-- <h1>{{msg}}</h1> -->
        <!-- <span>{{n+m}}</span> -->
        <!-- <img v-bind:src="imgurl" alt=""> -->
        <!-- <span v-text="msg"></span> -->
        <span v-html="msg"></span>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // document.querySelector('h1').innerText='hello vue!!'
        // 创建实例
        // const app=new Vue({
        //     /*el指定了当前创建vue实例发挥作用的范围，也就是说当前vue实例只在id为app
        //     的dom范围内生效，具体表现就是当前的data属性中的数据只有在 id为app的div内部中可以使用*/
        //     el:"#app",  
        //     // data属性存储当前vue实例要使用的数据
        //     data:{
        //         msg:'hello vue!!!'
        //     }
        // })


        // 插值表达式   设置元素内容   部分设置表签内容
        // const app=new Vue({
        //     el:"#app",
        //     data:{
        //         n:1,
        //         m:2
        //     }
        // })

        // v-bind指令
        /*插值表达式不能作为属性的值使用，只能放到开始标记和结束标记之间，
              也就是说插值表达式只能设置标签的内容
              只需在普通属性前加v-bind：，则这个属性值就可以接受动态的变量data中的值
            */
        // const app = new Vue({
        //     el: "#app",
        //     data: {
        //         imgurl: './images/1.jpg'
        //     }
        // })


        // v-text指令    设置的是整体内容
        // const app=new Vue({
        //     el:'#app',
        //     data:{
        //         msg:'hello vue!!'
        //     }
        // })


        // v-html指令    可以渲染标签
        const app=new Vue({
            el:'#app',
            data:{
                msg:'<h1>今天天气真好</h1>'
            }
        })

    </script>

其中因为涉及到了一些vue的指令，都有表明注释，多半能看明白，不懂得后期会有更新。
今日先到这里了拜拜撒