园龄：2年11个月粉丝：22 关注：1

📂Front-end

🔖Javascript 笔记

2024-11-27 22:46阅读: 31评论: 0推荐: 0

Vue-无构建工具的创建、挂载、渲染

简介

Vue是一个动态构建用户界面的渐进式 JS框架.

借鉴了Angular的模板语法和数据绑定
借鉴了React的组件化和虚拟DOM

特点：

声明式渲染: 先声明后使用
响应式数据: 数据改变时, 视图会响应数据的改变, 重新渲染新的值
组件化开发

安装

项目初始化: npm init -y
安装vue: npm install vue

无构建工具的环境

引入vue.js

vue.global.js是完整版(在初学阶段使用)
esm(ES Module): 使用ES的模块规范导入导出export default
runtime: 运行时版本, 相对于编译版本, 体积更小, 效率更高

 <!-- 1. 引入vue.js -->
<script src="./node_modules/vue/dist/vue.global.js"></script>

编写页面(视图)

 <!-- 2. 编写页面 -->
<div id="app">hello</div>

创建App实例并挂载

 <script>
  // 1. 从Vue中解构相应的API
  const { createApp } = Vue
 
  // 2. 创建App, 传入一个对象, 返回一个应用实例
  const app = createApp({})
  // 3. 挂载
  app.mount('#app')
</script>

声明式渲染

跟变量, 函数类似, 需要使用什么就先声明一下.

声明状态(变量)

 const app = createApp({
  // data 配置项: data必须是一个函数, 在函数中返回对象, 在返回的对象中声明状态
  data() {
    return {
      msg: 'hello',
    }
  },
})

使用状态(变量)

 <div id="app">
  // 通过{{}}(插值表达式)使用在data中定义的状态
  {{ msg }}
</div>

完整代码:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1. 引入vue.js -->
    <script src="../04.vue/node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <!-- 2. 创建div容器 -->
    <div id="app">
      姓名: {{name}} <br />
      年龄: {{age}} <br />
      学号: {{stu.sn}} <br />
      书籍: {{books[0]}}
    </div>
 
    <script>
      const { createApp } = Vue
      const app = createApp({
        data() {
          return {
            name: 'xiaoming',
            age: 20,
            stu: {
              sn: '20200101',
            },
            books: ['vue', 'js', 'gis'],
          }
        },
      })
      const instance = app.mount('#app')
    </script>
  </body>
</html>

挂载

一个应用实例必须在调用了 .mount() 方法后才会渲染

传入参数: 可以是一个 CSS 选择器字符串(常用) 或者一个实际的 DOM 元素
返回值: 根组件实例

 <body>
  <div id="app">{{msg}}</div>
 
  <script>
    const { createApp } = Vue
    const app = createApp({
      data() {
        return {
          msg: 'hello',
        }
      },
    })
    console.log(app)
    // 由于mount返回的不是app实例本身, 因此mount的调用需要放在链式调用的最后
    const instance = app.mount('#app')
    console.log(instance)  // Proxy对象
  </script>
</body>

根组件实例

在data中定义的状态会被代理到instance上.

当改变代理对象的状态值时, 可以拦截到set操作, 从而自定义set操作.

在自定义的set操作中更新DOM

 setTimeout(() => {
  instance.msg = 'world'
}, 1000)

响应式原理

 <body>
  <script>
    const obj = {
      name: 'xiaoming',
      0: 'test',
    }
    // 对象访问属性必须使用[]语法的两种情况
    // 1. 属性名是一个无效的标识符
    // 2. 属性名是一个变量
    // console.log(obj[0])
    let key = 'name'
    // console.log(obj[key]) // obj.name
 
    // 创建代理对象的过程叫做属性的劫持
    // 1. 将普通对象(目标对象)的每一个属性拦截, 添加自定义的getter和setter
    // 2. 后续对代理对象属性的设置, 触发自定义setter, 在setter中更新页面
 
    // p对象可以认为包含任意属性, 代理对象有效的属性跟目标对象是一致
    const p = new Proxy(obj, {
      get(target, key) {
        // 当访问p对象的属性时, 调用该函数, 将该函数的返回值做为表达式的结果
        // target: 目标对象
        // key: 代理对象的属性
        console.log('访问${key}属性')
        return target[key]
      },
      set(target, key, value) {
        console.log('设置${key}属性')
        target[key] = value
      },
    })
    console.log(p)
    
    // 对于普通对象而言, 访问的过程是由js引擎控制
    // console.log(obj.name)
    // 自定义的访问过程, 叫属性的getter操作(元编程)[meta]
  </script>
</body>

基本选项

状态

data选项

data选项必须是一个函数
在函数中返回一个对象, 在对象中定义状态
在data中定义的状态, 可以在模板中使用

 const app = createApp({
  data() {
    return {
      msg: 'hello',
    }
  },
})

方法

methods选项

语法: methods中定义方法
作用: 修改data中的状态

 <!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="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <button v-on:click="increment">点击+1: {{count}}</button>
    </div>
 
    <script>
      const { createApp } = Vue
 
      const app = createApp({
        data() {
          return {
            count: 0,
          }
        },
        methods: {
          increment() {
            // methods中定义的方法要求是普通函数 在普通函数中通过this拿到当前实例对象
            // 该函数中的this指向当前根组件实例instance
            console.log(this)
            this.count++
          },
        },
      })
      const instance = app.mount('#app')
    </script>
  </body>
</html>

上一篇JS-this指向

下一篇Vue-模板和选项式API

本文作者：khrushchefox

本文链接：https://www.cnblogs.com/khrushchefox/p/18573268

posted @ 2024-11-27 22:46 Khru 阅读(31) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

khrushchefox

Vue-无构建工具的创建、挂载、渲染

简介

安装

无构建工具的环境

引入vue.js

编写页面(视图)

创建App实例并挂载

声明式渲染

挂载

基本选项

状态

方法

公告

常用链接

我的标签

随笔分类 (117)

随笔档案 (118)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!-- 1. 引入vue.js -->
	<script src="./node_modules/vue/dist/vue.global.js"></script>

	<script>
	// 1. 从Vue中解构相应的API
	const { createApp } = Vue

	// 2. 创建App, 传入一个对象, 返回一个应用实例
	const app = createApp({})
	// 3. 挂载
	app.mount('#app')
	</script>

	const app = createApp({
	// data 配置项: data必须是一个函数, 在函数中返回对象, 在返回的对象中声明状态
	data() {
	return {
	msg: 'hello',
	}
	},
	})

	<div id="app">
	// 通过{{}}(插值表达式)使用在data中定义的状态
	{{ msg }}
	</div>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<!-- 1. 引入vue.js -->
	<script src="../04.vue/node_modules/vue/dist/vue.global.js"></script>
	</head>
	<body>
	<!-- 2. 创建div容器 -->
	<div id="app">
	姓名: {{name}} <br />
	年龄: {{age}} <br />
	学号: {{stu.sn}} <br />
	书籍: {{books[0]}}
	</div>

	<script>
	const { createApp } = Vue
	const app = createApp({
	data() {
	return {
	name: 'xiaoming',
	age: 20,
	stu: {
	sn: '20200101',
	},
	books: ['vue', 'js', 'gis'],
	}
	},
	})
	const instance = app.mount('#app')
	</script>
	</body>
	</html>

	<body>
	<div id="app">{{msg}}</div>

	<script>
	const { createApp } = Vue
	const app = createApp({
	data() {
	return {
	msg: 'hello',
	}
	},
	})
	console.log(app)
	// 由于mount返回的不是app实例本身, 因此mount的调用需要放在链式调用的最后
	const instance = app.mount('#app')
	console.log(instance) // Proxy对象
	</script>
	</body>

	<body>
	<script>
	const obj = {
	name: 'xiaoming',
	0: 'test',
	}
	// 对象访问属性必须使用[]语法的两种情况
	// 1. 属性名是一个无效的标识符
	// 2. 属性名是一个变量
	// console.log(obj[0])
	let key = 'name'
	// console.log(obj[key]) // obj.name

	// 创建代理对象的过程叫做属性的劫持
	// 1. 将普通对象(目标对象)的每一个属性拦截, 添加自定义的getter和setter
	// 2. 后续对代理对象属性的设置, 触发自定义setter, 在setter中更新页面

	// p对象可以认为包含任意属性, 代理对象有效的属性跟目标对象是一致
	const p = new Proxy(obj, {
	get(target, key) {
	// 当访问p对象的属性时, 调用该函数, 将该函数的返回值做为表达式的结果
	// target: 目标对象
	// key: 代理对象的属性
	console.log('访问${key}属性')
	return target[key]
	},
	set(target, key, value) {
	console.log('设置${key}属性')
	target[key] = value
	},
	})
	console.log(p)

	// 对于普通对象而言, 访问的过程是由js引擎控制
	// console.log(obj.name)
	// 自定义的访问过程, 叫属性的getter操作(元编程)[meta]
	</script>
	</body>