Vuejs我的了解

最新推荐文章于 2024-11-18 22:07:30 发布

perfei焓

最新推荐文章于 2024-11-18 22:07:30 发布

阅读量354

点赞数 1

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

本文链接：https://blog.csdn.net/java_zhangfei/article/details/106229648

版权

前端专栏收录该内容

6 篇文章

订阅专栏

Vuejs的开篇介绍

为什么学习Vuejs?

可能你的公司正要将原有的项目使用Vue进行重构。
也可能是你的公司新项目决定使用Vue的技术栈。
当然，如果你现在正在换工作，你会发现招聘前端的需求中，10个有8个都对Vue有或多或少的要求。
当然，作为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能。

简单认识一下Vuejs

Vue (读音 /vjuː/，类似于 view)，不要读错。
Vue是一个渐进式的框架，什么是渐进式的呢？
- 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
- 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
- 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
Vue有很多特点和Web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM

Vue.js安装

方式一：直接CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js 
生产环境 https://vuejs.org/js/vue.min.js

方式三：NPM安装

通过webpack和CLI的使用

Vuejs的简单使用

使用工具：WebStorm
代码展示

<div id="app">
	<h2>{{message}}</h2>
	<h2>{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
	//vue展示数据
	const app = new Vue({
		el:"#app", //id
		data:{ //定义数据
			message:"你好",
			name:"世界"
		} 
	})
</script>

页面展示
vue.js的下载

代码做了什么事情？

我们来阅读JavaScript代码，会发现创建了一个Vue对象。
创建Vue对象的时候，传入了一些options：{}
- {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
- {}中包含了data属性：该属性中通常会存储一些数据，这些数据可以是我们直接定义出来的，比如像上面这样。也可能是来自网络，从服务器加载的。
浏览器执行代码的流程：
- 执行到div代码显然出对应的HTML
- 执行JavaScript代码创建Vue实例，并且对原HTML进行解析和修改。
目前我们的代码是可以做到响应式的。
打开浏览器的开发者模式的console，来试一下 app.name = ‘中国’，直接可以看见页面会有不一样的效果。

Vue列表展示

代码块

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script src="../jsue.js"></script>
<script>
    //vue展示列表
    const app = new Vue({
        el:"#app",
        data:{
            movies: ['天下无贼','当幸福来敲门','古惑仔','无间道','大话西游']
        }
    })
</script>