Vue入门：看这一篇就够了

最新推荐文章于 2021-06-24 23:25:34 发布

置顶

zhang13pro

最新推荐文章于 2021-06-24 23:25:34 发布

阅读量1.2k

点赞数 8

分类专栏： Vue.js 关于前端就这样写文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_38289787/article/details/107682480

版权

高速通道

官网实栗
vue指令
网络请求 axios
- - 使用axios进行网络交互案例
小叮当任意门：
感谢点赞

话不多说，直接开干。
先来个官网实栗吧。

官网实栗

<body>
    <!--第一个vue实栗-->
    <div id="app">
        {
  {message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    	//注意这里构造Vue开头要大写哦，不然会报引用错误
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello world'
            }
        })
    </script>

</body>

el挂载点：
1、el是用来设置vue实栗挂载（管理）的元素
2、vue会管理el选项命中的元素及其内部的后代元素
3、可以使用其他的选择器，建议使用ID选择器
4、可以使用其他双标签，除了HTML和BODY

data数据对象：
vue中用到的数据定义在data中
data可以写复杂类型的数据，包括表达式

vue指令

vue指令是指以v-开头的一组特殊语法

v-text: 设置标签的文本值（textContent）

<body>
    <div id="app">
        <h3 v-text="message">小白</h3>
        <h3 v-text="info">定居在</h3>
        <h3>{
  {address}}定居</h3>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'前端程序员',
                info:'目前',
                address:'杭州'
            }
        })
    </script>
</body>

v-text指令的作用是设置标签的内容
默认写法会替换全部内容，使用{ {}}可以替换指定内容
内部支持表达式

最低0.47元/天解锁文章

zhang13pro

关注

8
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
Vue入门：看这一篇就够了

@[这是目录]话不多说，直接开干。先来个官网实栗吧。官网实栗<body>  <div id="app"> {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> //注意这里构造Vue
复制链接

扫一扫