VUE框架
-
vue是一套用于构建用户界面的渐进式框架
-
提供了MVVM数据绑定和一个可组合的组件系统
-
提供尽可能简单的API实现响应式惧绑定和可组合的视图组件
MVVM
Model-View-View-ViewMode，这是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向绑定；核心是是MVVM中的VM，负责连接View和Model，保证视图和数据的一致性
Vue快速入门
-
设置script标签引入vue
<script src="https://unpkg.com/vue@3"></script> -
设置一个视图由Vue管理
-
创建一个script标签，使用Vue.createApp方法来设置对应更新的数据
<!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>
<!-- 引入vue脚本文件 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<!-- 声明要控制的区域 -->
<div id="app">
{{message}}
</div>
<!-- 创建vue的实例对象 -->
<script>
const hello = {
// 指定数据源，即MVVM中的Model
data:function(){
return {
message:'Hello Vue!'
}
}
}
const app = Vue.createApp(hello)
app.mount('#app');
</script>
</body>
</html>
基础渲染
<body>
<div id="app">
<p>Name:{{username}}</p>
<p>Gender:{{gender}}</p>
<!--仅按照字符串渲染-->
<p>{{desc}}</p>
<!-- 把对应数据的内容按照html渲染 -->
<p v-html="desc"></p>
</div>
<script>
const vm = {
data: function(){
return {
username: '123',
gender: 'M',
desc: '<a href="http://www.baidu.com">baidu</a>'
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
属性绑定
对于标签中的属性，需要加冒号才会被读取
<body>
<div id="app">
<!-- 为标签的属性赋值，需要：来放置在属性名称前 -->
<a v-bind:href="link">baidu</a>
<input type="text" :placeholder="inputValue">
<img :src="imgSrc" :style="{width:w}" alt="">
</div>
<script>
const vm = {
data: function() {
return {
link:"http://www.baidu.com",
inputValue:'please Input',
imgSrc: './images/demo.png',
w: '500px'
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
Js表达式
<body>
<div id="app">
<!-- 可以使用js表达式来使用数据，但不能写js语句 -->
<p>{{number+1}}</p>
<p>{{ok ? 'True' : 'False'}}</p>
<p>{{message.split('').reverse().join(',')}}</p>
<p :id="'list-' + id">xxx</p>
<p>{{user.name}}</p>
</div>
<script>
const vm = {
data: function() {
return {
number: 9,
ok: false,
message: 'ABC',
id: 3,
user: {
name: 'fantank'
}
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
事件绑定
<body>
<div id="app">
<h3>conut number = {{count}}</h3>
<!-- 设置一个点击事件，该事件调用一个方法完成，使用v-on标签，该方法必须定义在对应的vm对象中 -->
<button v-on:click="addCount">+1</button>
<!-- 设置一个点击事件，但事件较简单，使用表达式完成，@等于v-on -@submit也可以-->
<button @click="count-=1">-1</button>
</div>
<!-- 处理完成后，不需要任何处理，数据自动刷新 -->
<script>
const vm = {
data: function() {
return {
count: 0,
}
},
// 设置一个方法，完成对应某些数据的处理
methods: {
addCount() {
this.count += 1;
},
},
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
条件渲染
<body>
<div id="app">
<!-- 设置按键，控制flag的反转 -->
<button @click="flag = !flag">显示开关</button>
<!-- v-if如果值为flase则该标签不会被创建 -->
<p v-if="flag">v-if显示</p>
<!-- v-show如果为false则该标签会使用css隐藏，该标签会被创建 -->
<p v-show="flag">v-show显示</p>
</div>
<script>
const vm = {
data: function() {
return {
flag: false,
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
if-else-elseif
使用方法和其他语言的if判断一样
<body>
<div id="app">
<p v-if="num > 0.5">值 大于 0.5</p>
<p v-else>值小于0.5</p>
<hr />
<p v-if="type === 'A'">优秀</p>
<p v-else-if="type === B">还行</p>
<p v-else>啥玩意</p>
</div>
<script>
const vm = {
data: function() {
return {
num: Math.random(),
type: 'C',
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
列表渲染指令
<body>
<div id="app">
<!-- 仅使用一个标签来循环显示列表中的数据 -->
<ul>
<!-- 使用v-for，括号中两个参数分别为列表中的元素和索引，如果不需要索引可以不写括号和第二个参数 -->
<li v-for="(user,i) in userList">索引是{{i}},id是{{user.id}},姓名是{{user.name}}</li>
</ul>
</div>
<script>
const vm = {
data: function() {
return {
userList: [
{id: 1, name: 'fantank'},
{id: 2, name: 'wulitt'},
{id: 3, name: 'kun'},
],
}
},
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
v-for的key
<body>
<div id="app">
<div>
<!-- v-model是双向绑定指令，即页面的值如果变化，也会修改数据中name的值 -->
<!-- 添加一个复选框 -->
<input type="text" v-model="name">
<!-- 添加按钮，调用函数添加一个用户 -->
<button @click="addNewUser">添加</button>
</div>
<ul>
<!-- 使用v-for，括号中两个参数分别为列表中的元素和索引，如果不需要索引可以不写括号和第二个参数 -->
<!-- 使用key来唯一标记一行，使得复选框等元素可以正确找到被选择中的一行，一般使用数据库中唯一的标识 -->
<li v-for="(user,i) in userList" :key="user.id">
<input type="checkbox" />
姓名：{{user.name}} id = {{user.id}}
</li>
</ul>
</div>
<script>
const vm = {
data: function() {
return {
userList: [
{id: 1, name: 'fantank'},
{id: 2, name: 'wulitt'},
{id: 3, name: 'kun'},
],
name: '',
nextId: 4,
}
},
methods: {
// 添加一个用户的方法，使用unshift在数字前端加入元素
addNewUser(){
this.userList.unshift({id: this.nextId, name: this.name})
this.name = ''
this.nextId++
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
Vue组件式开发
NPM
-
这是一个NodeJS包的管理和分发工具，是JS领域常用的管理依赖工具，NPM的常见用法是安装和更新依赖。
-
使用NPM之前，应该先安装Node.Js，前往官网安装即可
Vue CLI
-
Vue CLI是官方提供的构建工具，通常称为脚手架，可以快速构建前端项目
-
用于快速搭建一个带有热重载以及构建生产版本等功能的单页面应用
-
基于webpack构建，可以通过项目内的配置文件进行配置
-
安装方法：npm install -g @vue/cli
-
创建项目
在项目目录下输入
vue create hello暂时不选择使用eslint，选择manually，以及取消Linter，选择3.x版本
选择把依赖存储到package.json中
完毕后，将生成的项目文件夹使用vscode打开（拖入即可）
-
项目结构
-
package.json
类似于pom.xml，用于存放前端项目的依赖
-
src目录
相当于java项目的src目录，存放源码
- main.js vue的入口文件，创建了vue的vm对象
-
-
运行项目
在package.json中运行scripts的serve指令即可，或者在项目目录下的命令行中输入
npm run serve"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" },可以看到创建了一个本地的服务器，可以在对应的端口访问这个页面
如果需要关闭，可以使用crtl+c关闭服务器
-
项目组织
通过import的方式导入对应的方法和文件，实现组件化的编程
组件化开发
-
组件是Vue.js的强大功能，组件可以拓展html元素，封装可重用的代码
-
Vue组件可以支持小型、独立的可复用组件开发大型应用
-
组件的构成
-
后缀名为.vue
-
每个.vue的组件由三部分组成，如App.vue是一个自带的根组件
- template：组件的模板，可能包含html标签或其他组件
- script：组件的javascript代码
- style：组件的样式
-
渲染流程
如App.vue
<template> <!-- vue的logo --> <img alt="Vue logo" src="./assets/logo.png"> <!-- 自定义的HelloWorld组件，这个组件在components目录下--> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> <Hello></Hello> </template> <script> // 导入需要的组件 import HelloWorld from './components/HelloWorld.vue' import Hello from './components/Hello.vue' export default { name: 'App', // 在这里注册导入的标签 components: { // HelloWorld, Hello } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Hello.vue
<template> <h1>Hello Vue!</h1> </template> <script> </script> <style> </style>最终App.vue在main.js导入，并且被mount导入到了一个页面对应的标签中，所以App.vue最终会被渲染到id为app的div之中
import { createApp } from 'vue' // 导入App.vue为App import App from './App.vue' // 把App绑定到id为app的div中 createApp(App).mount('#app')<!DOCTYPE html> <html lang=""> <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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <!--app的div在这里，所以App.vue会被渲染注入到这里--> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
-
扫一扫
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
