Vue学习（学习打卡Day12）

最新推荐文章于 2024-07-25 11:00:49 发布

进击攻城狮

最新推荐文章于 2024-07-25 11:00:49 发布

阅读量470

点赞数 16

分类专栏： Vue 文章标签： vue.js 学习 javascript html

本文链接：https://blog.csdn.net/yi_chen_c/article/details/124519843

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

📋 作者介绍：友友们好我是乱披风锤，大二学生党一枚
💖作者主页：乱披风锤的个人博客主页.跳转到个人简介
🔥我和友友们一样喜欢编辑，天天敲代码🤭，沉迷学习，日渐消瘦。很荣幸能向大家分享我的所学，和大家一起进步。如果文章有错误，欢迎在评论区指正。那么开始今天的学习吧！
🎉 支持我：点赞👍+收藏⭐️+留言📝
在这里插入图片描述

一、初识_vue.html

<!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" />
    <title>Document</title>

    <script src="../初始vue/js/vue.js"></script>
  </head>
  <body>
    <!-- //准备好一个实例 -->
    <div id="root">
      <h1>Hello,{{name}}</h1>
    </div>
    <script>
      Vue.config.productionTip = false;
      const X = new Vue({
        el: "#root", //e1用于指定当前Vue实例为哪个容器服务
        data: {
          name: "尚硅谷",
        },
      });
    </script>
  </body>
</html>

一、初识_vue.html

二、02vue.html

初识Vue：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】；
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

			注意区分：js表达式 和 js代码(语句)
					1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
								(1). a
								(2). a+b
								(3). demo(1)
								(4). x === y ? 'a' : 'b'

					2.js代码(语句)
								(1). if(){}
								(2). for(){}
	-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../初始vue/js/vue.js"></script>
  </head>
  <body>
    <!-- 
			初识Vue：
				1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
				2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
				3.root容器里的代码被称为【Vue模板】；
				4.Vue实例和容器是一一对应的；
				5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
				6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
				7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

				注意区分：js表达式 和 js代码(语句)
						1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
									(1). a
									(2). a+b
									(3). demo(1)
									(4). x === y ? 'a' : 'b'

						2.js代码(语句)
									(1). if(){}
									(2). for(){}
		-->

    <!-- 准备好一个容器 -->
    <div id="demo">
      <h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
    </div>

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

      //创建Vue实例
      new Vue({
        el: "#demo", //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        data: {
          //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
          name: "atguigu",
          address: "北京",
        },
      });
    </script>
  </body>
</html>

三、03数据绑定

Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>数据绑定</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../初始vue/js/vue.js"></script>
  </head>
  <body>
    <!-- 
			Vue中有2种数据绑定的方式：
					1.单向绑定(v-bind)：数据只能从data流向页面。
					2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
						备注：
								1.双向绑定一般都应用在表单类元素上（如：input、select等）
								2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
		 -->
    <!-- 准备好一个容器-->
    <div id="root">
      <!-- 普通写法 -->
      <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
			双向数据绑定：<input type="text" v-model:value="name"><br/> -->

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

      <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
      <!-- <h2 v-model:x="name">你好啊</h2> -->
    </div>
  </body>

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

    new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
      },
    });
  </script>
</html>

四、data与el的2种写法

data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>el与data的两种写法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../初始vue/js/vue.js"></script>
  </head>
  <body>
   
    <!-- 准备好一个容器-->
    <div id="root">
      <h1>你好，{{name}}</h1>
    </div>
  </body>

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

    //el的两种写法
    /* const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'尚硅谷'
			}
		})
		console.log(v)
		v.$mount('#root') //第二种写法 */

    //data的两种写法
    new Vue({
      el: "#root",
      //data的第一种写法：对象式
      /* data:{
				name:'尚硅谷'
			} */

      //data的第二种写法：函数式
      data() {
        console.log("@@@", this); //此处的this是Vue实例对象
        return {
          name: "尚硅谷",
        };
      },
    });
  </script>
</html>

五、Vue中的MVVM.html

—MVVM模型
1. M：模型(Model) ：data中的数据
2. V：视图(View) ：模板代码
3. VM：视图模型(ViewModel)：Vue实例
观察发现：
1.data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>理解MVVM</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../初始vue/js/vue.js"></script>
  </head>
  <body>

    <!-- 准备好一个容器-->
    <div id="root">
      <h1>学校名称：{{name}}</h1>
      <h1>学校地址：{{address}}</h1>
      <!-- <h1>测试一下1：{{1+1}}</h1>
      <h1>测试一下2：{{$options}}</h1>
      <h1>测试一下3：{{$emit}}</h1>
      <h1>测试一下4：{{_c}}</h1> -->
    </div>
  </body>

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

    const vm = new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
        address: "北京",
      },
    });
    console.log(vm);
  </script>
</html>

总结

好了，那么今天的学习就到这里了。友友们觉得不错的可以给个关注，点赞或者收藏哦！感谢各位友友们的支持。以下的代码希望各位大佬们自行检验哦，毕竟亲手操作让记忆更加深刻。

进击攻城狮

关注

16
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
10
评论
Vue学习（学习打卡Day12）

📋 作者介绍：友友们好我是乱披风锤，大二学生党一枚💖作者主页：乱披风锤的个人博客主页.跳转到个人简介🔥我和友友们一样喜欢编辑，天天敲代码🤭，沉迷学习，日渐消瘦。很荣幸能向大家分享我的所学，和大家一起进步。如果文章有错误，欢迎在评论区指正。那么开始今天的学习吧！🎉 支持我：点赞👍+收藏⭐️+留言📝Vue学习（学习打卡Day12）一、初识_vue.html一、初识_vue.html二、02vue.html三、03数据绑定四、data与el的2种写法五、Vue中的MVVM.html总结一、初识_vu.
复制链接

扫一扫