01Vue核心1

最新推荐文章于 2024-08-16 23:32:06 发布

shamodyingzi

最新推荐文章于 2024-08-16 23:32:06 发布

阅读量101

点赞数

分类专栏： Vue2学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2202_75483965/article/details/128060130

版权

Vue2学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.初识Vue

1.如何让Vue工作？

1.创建html文件，引入vue.js。
2.在body中准备好一个容器：

<div id="root">
    <h1>Hello 尚硅谷</h1>   //写死的数据用Vue不恰当，可以让hello后面的内容发生变化。
</div>

3.在script中创建Vue实例——只传一个参数，参数的类型是配置对象。

<script type="text/javascript">
    Vue.config.productionTip = false;   //阻止vue在启动时生成的生产提示

    //创建Vue实例--只传一个参数，参数的类型是配置对象
    new Vue({
        el:'#root',   //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        }
    );
</script>

4.在创建的实例中设置好配置对象后，容器就和Vue实例对象建立了联系。

5.把容器里面变化的数据交给Vue实例保管，在Vue实例里面通过某些配置项，把变化的内容保存在配置对象里面，再通过某些办法从配置对象里面把变化的数据拿出来，放在容器原有的位置。

6.以后如果页面中有变化的数据，可以直接在Vue中改变数据，在页面中就自动修改了。（因为两者之间建立了联系，省去了自己操作dom）

7.双向建立联系并且可以存变化的值在Vue实例中：

<!-- 准备一个容器 -->
<div id="root">
    <h1>Hello,{{name}} </h1>  <!-- 插值语法:用两组{{}}就是一个分割符，里面写属性名，就可以访问到对应的属性值-->
</div>

<script type="text/javascript">
    Vue.config.productionTip = false;   //阻止vue在启动时生成的生产提示

    //创建Vue实例--只传一个参数，参数的类型是配置对象
    new Vue({
        el:'#root',   //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        data:{   //data中用于存储数据，数据供el所指定的容器去使用。值暂时先写成一个对象（以后会写成一个函数）
            name:'尚硅谷 123'
        }
    });
</script>

2.初始Vue重点

1.一个Vue实例不能同时去接管多个容器，如果一个Vue实例对应了多个el配置一样的容器，这个Vue实例只会解析从上往下数第一个容器。后面的容器里面的Vue模板不会被解析，并且不会报错。

2.一个容器不能被多个Vue实例去接管，要把这个容器中所有变化的数据都放在一个Vue实例里面去保存和改变。如果有多个el配置一样的Vue实例，只会和从上往下数第一个Vue实例双向绑定。并且写多个Vue实例去和一个容器建立联系时，会报错。

3.容器和Vue实例之间是一对一的联系。

4.Vue模板中{{}}里面能写什么？——{{}}里面包的内容必须写成：js表达式。
比如：{{name.toUpperCase()}} 里面是函数调用表达式。

！注意区分：js表达式和js代码（语句）

表达式：一个表达式会产生一个值(都是可以用变量去接），可以放在任何一个需要值的地方。
　　比如： a   a+b   demo(1)函数调用表达式   x==y?a:b

js代码（语句）：语句不生成值，只控制代码的走向。
    比如： if(){}控制代码的走向   for(){}控制代码走几次
js表达式是一种特殊的js语句

5.学会使用插件Vue Devtools进行查看和测试。
在这里插入图片描述

3.初识Vue总结

1.想让Vue工作，就必须创建一个Vue实例（可以直接创建，不用变量接收），且要传入一个配置对象。
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
3.root容器里的代码被称为[Vue模板]。
4.Vue模板经过解析，就变成了正常的html片段。
5.容器两个作用：为Vue提供模板;把Vue的工作成果能知道往哪里放。
6.Vue实例和容器是一一对应的。
7.真实开发中只有一个Vue实例，并且会配合着组件一起使用。
8.{{xxx}}中的xxx要写js表达式，并且xxx可以自动读取到data中的所有属性。
9.一旦data中的数据发生改变，那么模板中用到改数据的地方（页面上）也会自动更新。

2.Vue模板语法

1.模板语法

1.模板语法分为两类：
1）插值语法：实现功能单一，就是把指定的值放在指定的位置。
2）指令语法：完成的事情比较高端。

2.通过下面的功能实现分析两者的区别：在这里插入图片描述

2.模板理解

1.插值语法： {{js表达式}}
2.指令语法：
1)先通过一段代码试一下：

    <!-- 准备号一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <br>
        <h1>指令语法</h1>
        <a href={{url}}>点击我去尚硅谷学习</a>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; 
        new Vue({
            el:'#root',
            data:{
                name:'jack',
                url:'http://www.atguigu.com'
            }
        })
    </script>

2)如果要把链接存到Vue模板中，使用<a href={{url}}>插值语法并不合适，并且会报错。

报错信息：

[Vue warn]: Error compiling template:编译错误
href=“{{url}}”: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. 用插值语法去动态的指定一个标签里面的标签属性的方式已经被移除了，请你使用v-bind，或者:这种简写形式去代替。
For example, instead of <div id="{{ val }}">, use <div:id="val">.
     <br>
     <h1>指令语法</h1>
         <a href="{{url}}">点击我去尚硅谷学习</a>
         ^^^^^^^^^^^^^^
     </div>
(found in <Root>)

3）可以使用v-bind:id="val"或者:id="val"

Vue里的指令都是以`v-`开头，这里的'`v-bind`就是一个指令，所以称为指令语法，区别于简单的插值语法。
其他指令：`v-if`  `v-model`

`v-bind`是绑定，这样写`v-bind:href="url"`，""里面的url就当成了js表达式（是一个变量）去执行了。

如果不加`v-bind:`,`href="url"`就是一个普通的标签属性，""里面的url只是一个字符串。

4）最终代码

<!-- 准备号一个容器 -->
<div id="root">
    <h1>插值语法</h1>
    <h3>你好,{{name}}</h3>
    <br>
    <h1>指令语法</h1>
    <!-- v-bind:可以给标签里的任何属性动态的绑定值 -->
    <a v-bind:href="url" v-bind:a="hello">点击我去尚硅谷学</a>
    <a :href="url" :a="hello">点击我去尚硅谷学习2</a>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false; 
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            url:'http://www.atguigu.com',
            hello:'你好'
        }
    })
</script>

v-bind:可以给标签里的任何属性动态的绑定值。
v-bind可以简写为:
不是所有指令都能简写为:

3.什么时候用插值，什么时候用指令？
1）插值语法。

功能：用于解析标签体内容。标签体：起始标签和结束标签中间夹的内容就是标签体。
写法：{{xxx}} ,其中xxx是js表达式，并且可以直接读取到data中的所有属性。

2）指令语法。

功能：用于解析标签（包括：标签属性，标签体内容，绑定事件…）
举例：v-bind:href=“xxx” ,可以简写成:href=“xxx”,[xxx同样要写js表达式]，且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是v-???,比如v-if,v-model。

3.Vue实例多组件结构练习

代码如下：

<!-- 准备号一个容器 -->
<div id="root">
    <h1>插值语法</h1>
    <h3>你好,{{name}}</h3>
    <br>
    <h1>指令语法</h1>
    <a v-bind:href="school.url" v-bind:a="school.hello">点击我去{{school.name}}学习1</a>   
</div>

<script type="text/javascript">
    Vue.config.productionTip = false; 
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            school:{
                url:'http://www.atguigu.com',
                hello:'你好世界',
                name:'尚硅谷'
            }        
        }
    })
</script>

3.数据绑定

1.单向数据绑定

1.数据绑定可以用v-bind：,但是bind单向数据绑定。
2.Vue实例中data中的数据改变了，会影响页面中的数据。
3.但是在页面改变数据后，在console中输入代码：document.querySelector('input').value 获取输入框的内容，结果是：尚硅谷1234',在data数据中却没有改变。
4.data—>value的线是存在的，单独value—>data的线是不存在的。

5.代码：单向数据绑定：<input type="text" v-bind:value="name">

2.双向数据绑定

1.使用v-model实现双向绑定。
2.代码：双向数据绑定：<input type="text" v-model:value="name">

3.单向绑定和双向绑定之间相互影响

由于双向绑定中页面的值影响了data的值，data的值改变了又影响单向绑定中页面的值。最终导致单向绑定和双向绑定页面的中以及data的值都一样。

代码：

    <!-- 准备号一个容器 -->
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name">
        <br><br>
        双向数据绑定：<input type="text" v-model:value="name">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; 
        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            }
        });
       
    </script>

4.比较v-bind和v-model

1.写一段代码：

    <div id="root">
        <h2 v-bind:x="name">你好啊</h2>
        <!-- 代码错误 -->
        <h2 v-model:x="name">你好啊！</h2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false; 
        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            }
        });   
    </script>

在Element中解析的html代码：

    <h2 x="尚硅谷">你好啊</h2>
    <h2>你好啊！</h2>

2.使用v-model时x已经丢了，并且控制台报错。

1)报错提示：

[Vue warn]: Error compiling template:模板编译失败
<h2 v-model="name">: v-model is not supported on this element type. If you are working with contenteditable, it’s recommended to wrap a library dedicated for that purpose inside a custom component.
翻译：v-model不支持这种元素类型<h2 v-model="name"> ,如果您正在使用contenteditable，建议在自定义组件中包装一个专用于该目的的库。

2)v-model只能应用在表单类元素（输入类元素）上，得有value值才行。

表单类（输入类）元素，都有value值，都是要和用户产生交互的，随着用户的输入value值在变化，所以需要使用双向绑定。
但是对于标题类的标签，不能输入，没有value值，所以说不能捕获用户的value值，也不会影响data的变化，所以没有意义。

5.总结

1.单向绑定（v-bind）：数据只能从data流向页面。
2.双向绑定（v-model）：数据能从data到页面双向流动。

注意：
- 双向绑定一般都应用在表单类元素上（input,select)
- v-model:value 可以简写为v-model,因为v-model默认收集的就是value值。(注意：也要去掉)

3.简写：

单向数据绑定：<input type="text" :value="name"><br>
双向数据绑定：<input type="text" v-model="name"><br>

4.el与data的两种写法

1.前期工作

1.用变量接收vue实例，在输出Vue实例。
*注意：这里输出的是Vue实例对象而不是Vue构造函数。

    <!-- 准备号一个容器 -->
    <div id="root">
        <h1>你好,{{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; 
        //用变量接收vue实例
        const v = new Vue({
            //el:'#root',

            data:{
                name:'尚硅谷atGuiGu'
            }
        });   
        //输出Vue实例，这里输出的是Vue实例对象而不是Vue构造函数
        console.log(v);
    </script>

2.在控制台得到Vue实例对象。
1）截图：
在这里插入图片描述

2)Vue实例对象中有很多属性和方法。

但是有一类属性和方法是以$开头的，这些属性和方法都是Vue为程序员准备好的（都是给程序员用的）。
不带$的属性和对象是Vue底层在用的。

3）vue实例缔造者的原型对象上的属性和方法，所有的实例对象都可以使用。
截图：
在这里插入图片描述

4)原型对象上的方法： $m o u n t () 也可以指定容器代码： ‘ v .$ mount(‘#root’); `

2.容器和vue实例对象之间建立联系

1.方法一：在Vue实例对象中用：el:'#root',。
　　特点：这种方法在创建实例之处就要想好和哪个容器建立联系。

2.方法二：在用变量接收到vue实例后，在外面用变量名.$mount('#root'); 。
　　特点：
　　　　1）这种方法可以在容器和实例都写好之后，再给两个建立联系。
　　　　2）并且能在建立联系的时候做很多事情。比如：设置延迟定时。

3.新方法代码：$mount()

 <!-- 准备号一个容器 -->
    <div id="root">
        <h1>你好,{{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; 
        //用变量接收vue实例
        const v = new Vue({
            data:{
                name:'尚硅谷atGuiGu'
            }
        });   
        //输出Vue实例，这里输出的是Vue实例对象而不是Vue构造函数
        console.log(v);

        /* 设置定时器 */
        setTimeout(function(){
            v.$mount('#root');   //也可以指定容器
        },1000);
        //v.$mount('#root');   //也可以指定容器
    </script>

4.$mount() 这个词？
把容器里面所写的Vue模板交给Vue实例进行解析，解析后把解析完的内容重新放到容器（页面）的指定位置上。放叫挂载，mount有“挂载”的意思。

3.data的两种写法

1.data的第一种写法：对象式

    <script type="text/javascript">
        Vue.config.productionTip = false; 
        new Vue({
            el:'#root',
            //对象式
            data:{
                name:'尚硅谷atGuiGu'
            }
        });   
    </script>

2.data的第二种写法：函数式(以后学到组件必须用函数式)

    <script type="text/javascript">
        Vue.config.productionTip = false; 
        //data的函数式写法
        new Vue({
            el:'#root',
            data:function(){
                console.log('@@@',this); //此处的this使Vue实例对象
                //data函数必须要返回一个对象，对象里面的数据就是所需要的
                return{
                    name:'尚硅谷atGuiGu'
                }
            }
        });
    </script>