1. 初识Vue

最新推荐文章于 2022-12-05 21:42:51 发布

Sun Jiakai_凯

最新推荐文章于 2022-12-05 21:42:51 发布

阅读量72

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/s12345672/article/details/119010520

版权

Vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1、什么是Vue？

	一套用于构建用户界面的渐进式的JavaScript框架

2、Vue的特点

	1、采用组件化模式，提高代码复用率、且让代码更好维护，一个 xx.vue就是一个组件
	2、声明式编码，让编码人员无需直接操作DOM，提高开发效率
	3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

3、初识vue

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

注意区分：js表达式 和 js代码
	1.表达式：一个表达式会产生一个值，可以放在任何需要这个值的位置
		1.1 a
		1.2 a+b
		1.3 demo(1)
		1.4 x === y ? 'a':'b'
	2. js代码(语句)
		2.1 if(){  }
		2.2 for(){  }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>初始Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>勿屈己而从人，勿沽名而钓誉</h2>
            <h2>姓名：{{name}}</h2>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;  //阻止 Vue 在启动时生成生产提示
            
            //创建Vue实例对象
            new Vue({
                //el: document.getElementById("root"), 作用和如下相同
                el: '#root', //el: 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
                data:{  //data: 中用于存储数据，数据仅供e所指定的容器使用
                    name: '刘恺威'
                }
            })
        </script>
    </body>
</html>

Sun Jiakai_凯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1. 初识Vue

1、什么是Vue？一套用于构建用户界面的渐进式的JavaScript框架2、Vue的特点 1、采用组件化模式，提高代码复用率、且让代码更好维护，一个 xx.vue就是一个组件 2、声明式编码，让编码人员无需直接操作DOM，提高开发效率 3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点...
复制链接

扫一扫