初识Vue基础知识

xiaoDream-

已于 2022-03-24 23:57:13 修改

阅读量838

点赞数

分类专栏： vue 文章标签：前端 vue

于 2022-03-22 19:54:24 首次发布

本文链接：https://blog.csdn.net/qq_41392076/article/details/123653580

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.想让vue工作要创建一个vue实例并且传入一个配置对象

2.root容器里的代码依然符合html规范,混入了特殊的vue语法

3.root容器里的代码称为vue模板

4.vue实例和root容器一一对应

重点:{{xxx}}插值表达式,要写js表达式并且xxx

可以自动读取data里面的所有属性

js表达式:
        表达式: 一个表达式会产生一个值,可以放任何一个需要值的地方
            No.1     m
            No.2     m + n
            No.3     temp(6)
            No.4     m === n ? 'm' : 'n'
js代码(语句):
            No.1     if(){}
            No.2     for(){}

vue代码实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>初识vue</title>
</head>
    <div id="root">
        <p>{{msg}}</p>
    </div>
<body>
    <script>
        // 实例vue
        new Vue({
                el:'#root',
                data:{
                    msg:'插值表达式'
                }
        })
    </script>
</body>
</html>

2.vue模板语法

插值语法:
- 功能:用于解析标签体内容
- 写法:{{xxx}} xxx js表达式
指令式语法:
- 功能:解析标签 (标签属性,标签内容,绑定事件.......)
- 举例:v-bind:href="xxx" xxx js表达式并且可以读取data里面所有属性
  - 简写: :href="xxx"

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>vue模板语法</title>
</head>
    <div id="root">
        <p>你好{{msg}}</p>
        <a :href="url">点击我可以跳转百度</a>
        <!-- 可以将属性封装在对象里面 -->
        <p>
            <span>学校:{{school}}</span><br/>
            <span>姓名:{{person.name}}</span><br/>
            <span>年龄:{{person.age}}</span><br/>
        </p>
    </div>
<body>
    <script>
        // vue实例
        new Vue({
            el:"#root",
            data:{
                msg:"vue",
                url:"http://www.baidu.com",
                school:"Sun",
                person:{
                    name:"小帅锅",
                    age:18,
                }
            }
        })
    </script>
</body>
</html>

xiaoDream-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Vue基础知识

1.想让vue工作要创建一个vue实例并且传入一个配置对象2.root容器里的代码依然符合html规范,混入了特殊的vue语法3.root容器里的代码称为vue模板4.vue实例和root容器一一对应重点:{{xxx}}插值表达式,要写js表达式并且xxx可以自动读取data里面的所有属性js表达式: 表达式: 一个表达式会产生一个值,可以放任何一个需要值的地方 No.1 m No.2 m + n
复制链接

扫一扫