vue学习日记-01：相关概念

yinfanfff

已于 2024-03-05 11:55:15 修改

阅读量344

点赞数 9

分类专栏： vue入门学习文章标签：学习

于 2024-03-04 11:42:25 首次发布

本文链接：https://blog.csdn.net/yinfanfff/article/details/136443466

版权

vue入门学习专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1.vue是什么

2.跟随教程创建实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
</head>
<body>
<!--创建vue实例 初始化渲染
1.准备容器（vue所管理的范围
2.引包(开发版本包/生产版本包)官网
3.创建实例
4.添加配置项=》完成渲染）
-->
<div calss="box"></div>
<div class="box2"></div>
<div id="app">
<!--这里将来会编写一些用于渲染的 代码逻辑-->
    <h1>{{msg}}</h1>
    <a>{{count}}</a>
</div>
<!-- 引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // 一旦引入vuejs核心包 在全局环境就有了vue构造函数
    const app = new Vue({
        el: '#app',
        data:{
            msg:'Hello 小凡',
            count:666
        }
    })


</script>

</body>
</html>

3.插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
插值表达式：Vue的一种模版语法
作用：利用 表达式 进行抽值渲染
语法{{ 表达式 }}

注意点：
 1.使用的数据要存在
 2.支持的表达式，不是语句 if，for
 3.不能再标签属性中使用{{}}
-->
<div id="app">
  <p>{{ nickname }}</p>
  <p>{{ nickname.toUpperCase() }}</p>
  <p>{{ nickname+'你好'}}</p>
  <p>{{ age >=18 ? '成年' : '未成年' }}</p>
  <p>{{ friend.name }}</p>
  <p>{{ friend.desc }}</p>

<!--错误示范  ---------->
<!--  <p>{{hobby}}</p>-->
<!--  <p>{{if}}}</p>-->
<!--  <p title="{{ nickname }}">我是p标签</p>-->
</div>

<!-- 引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      nickname:'tony',
      age:18,
      friend:{
        name:'jepson',
        desc:'热爱学习 Vue'
      }

    }
  })
</script>

</body>
</html>

3.Vue核心特征：响应式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{ msg }}
    {{count}}

</div>

<!-- 引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
const app = new Vue({
    el:'#app',
    data:{
        //响应式数据
        msg:'你好 小凡',
        count:100
    }
})
// data 中的数据 是会被添加到实例上
//1.访问数据 实例.属性名
//2.修改数据 实例.属性名 = 新值
</script>


</body>
</html>