Vue初识

Biewenwsm

已于 2022-12-07 11:51:38 修改

阅读量171

点赞数

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

于 2022-12-06 23:06:49 首次发布

本文链接：https://blog.csdn.net/Biewenwsm/article/details/128212153

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以下笔记根据尚硅谷视频整理

第一章：Vue的初识与安装

一.安装

1.打开浏览器，搜索vue

2.打开官方网址==>快速上手==>打开vue2文档==>开发者版本

二、编写程序

1.打开vscode，编写第一个vue

初识Vue:

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
root容器里的代码依然符合htm1规范，只不过混入了一些特殊的Vue语法
root容器里的代码被称为【Vue模板】;
el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串
data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue在启动时生成提示
        
      new Vue({
            el:'#root',
            data() {
                return {
                    name:'张三'
                }
            },
        })
    </script>
</body>
</html>

2.容器与vue实例的对应关系

一个容器只能由一个实例接管，简言之，二者之间是一对一的关系

错误示例：

一个容器对应多个实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>hello,{{name}},{{address}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue在启动时生成提示
        
      new Vue({
            el:'#root',
            data() {
                return {
                    name:'张三'
                }
            },
        })
        new Vue({
            el:'#root',
            data() {
                return {
                    address:'云南昆明'
                }
            },
        })
    </script>
</body>
</html>

结果：另外一个属性不生效

多个容器对应一个实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>

    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue在启动时生成提示
        
      new Vue({
            el:'#root',
            data() {
                return {
                    name:'张三'
                }
            },
        })
    </script>
</body>
</html>

结果：只有一个生效

3.总结

真实开发中只有一个vue实例，并且会配合着组件一起他用;
(Xxx)中的xxX要写js表达式，Hxxx可以自动读取到data中的所有属性.
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新.

注意区分:

js表达式和js代码(语句)

1.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方

(1). a+b

(2). demo(1)

(3). x === y ? 'a': "b

2.js代码(语句)

(1). if(){}

(2).for(){}

三、Vue模板语法

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>hello,{{name}}</h3>
        <h1>指令语法</h1>
        <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习</a>
        <a :href="school.url" x="hello">点我去{{school.name}}学习</a>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成提示
    
 new Vue({
    el:'#root',
    data:{
            name:'罗张三',
            school:{
                name:'百度',
                url:'https://www.baidu.com/',
         }
    }
 })
</script>
</html>

结果：

总结：

Vue模板语法有2大类:

1.插值请法: 功能:用于解析标签体内容写法: ((xxx)，xxx是js表达式，且可以直接读取到date中的所有属性，

2.指令语法: 功能:用于解析标签包括:标签属性、标签体内容、绑定事件举例: v-bind:href="xxx”或简写为 :href="xxx"，xxX同样要写js表达式且可以直接读取到data中的所有属性。

备注:Vue中有很多的指令，且形式都是:v-????，此处我们只是拿v-bind举个例子.

四、数据绑定

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        单向数据绑定<input type="text" :value="name"><br>
        双向数据绑定<input type="text" v-model="name">
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成提示
    
 new Vue({
    el:'#root',
    data:{
            name:'罗张三'
    }
 })
</script>
</html>