Vue 基础介绍
Vue是什么?
Vue.js是一套用于构建用户界面的渐进式框架,主要用于单页面应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue优点
1.易用 、灵活、 高效、 指令系统 、SPA(单页面应用) 、MVVM
2.Vue 不支持IE8 及以下版本
多页面应用:1个url 对应一个html页面,多个url对应多个html
多页面应用有利于SEO优化,但会白屏,用户体验不好
单页面应用:多个url对应1个html页面
单页面首屏加载比较慢,不利于SEO优化,用户体验好
采用 vue:大量的数据增删改查的操作
使用 jq :大量的DOM节点操作或者动画(show、hide 、slideDown 、slideUp等) ,
Vue安装
官网:https://cn.vuejs.org/
vue安装及引入:
1.cdn :<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.npm: npm install vue
3.vue脚手架:
①安装webpack:npm install webpack -g
②安装vue-cli脚手架:npm install vue-cli -g
③查看安装版本:vue --version
④初始化脚手架项目:vue init webpack 项目名称(项目名称最好不用中文和空格)
⑤进入到项目根目录:cd 项目名称
⑥运行项目:npm run dev
Vue基础写法
<!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.安装 npm i vue -->
<!-- 2.引入 -->
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 3.控制范围 -->
<div id="app">
<!-- {{}}:模板语法 -->
{{1+1}} <!-- 2 -->
{{x}} <!-- 10 -->
</div>
<script>
// 4.实例化vue对象
new Vue({
el:"#app",//挂载点
data:{
//属性(变量)
},
methods:{
//方法(函数)
}
})
</script>
</body>
</html>
Vue学习
1.el 挂载点
1.不能挂载到body|html,要挂载到正常的元素上
2.一个vue实例只能挂载到一个节点上,所以一般情况下使用id选择器
3.如果有好几个元素都满足el的选择,vue实例挂载到满足条件的第一个节点上
2.data 属性:先声明 后使用
new Vue({
el:"#app",//挂载点
data:{ //属性-变量
x:10,
arr:[]
}
})
3.methods 方法
new Vue({
el:"#app",//挂载点
methods:{
show:function(){},
hide:function(){},
}
})