vue（2）
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
目录
一、计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
通俗的说就是：修改data的值
1、使用方法
两种表示
第一种：
//计算属性
computed: {
messageComputed: function() {
console.info("computed");
var m = this.message;
for (var i = 0; i < ids.length; i++) {
m += ids[i];
}
return m;
}然后直接访问即可
第二种
使用get set 方法 默认是使用get方法的，只有使用
app.messageComputed2 ="admin" 改变的时候才会执行set方法
//默认是get 的 设置
//app.messageComputed2 = 'admin' 当进行修改的时候才能调用set的方法
messageComputed2: {
get: function() {
return this.message;
},
set: function() {
var m = this.message;
for (var i = 0; i < ids.length; i++) {
m += ids[i];
}
this.message = m;
}
}2.为什么要使用计算方法
大家可以方法，我么通过methods的方法也可以实现data中数据值的修改，因此为什么要使用计算方法呢？
划重点：计算方法是可以使用缓存的，如果值已经存在，不执行方法直接使用缓存，而方法是不会使用缓存的，每次必须调用方法
二、侦听器
//侦听器
watch: {
//key是要监听的属性
//当message发生变化的时候 ---就会调用
//参数1 变化后的数据的内容
//参数2 变化前的数据的内容
message: function(newVal, oldVal) {
console.info("message 发生变化了")
console.info("message的old:" + oldVal)
console.info("message的new:" + newVal)
if (newVal == 'hello vue1') {
this.status = true
} else {
this.status = false
}
}
}这样设置完毕后，当data中的message发生改变的时候就会执行这个方法
三、模板语法
1、模板语法
{{}} 可以调用一些方法 例如： {{ message.split(' ').reverse().join(' ') }}
但是{{}} 里面写的如果是html标签是无法解析的
这里指定就可以用来解析标签
2、指令
以为v-开头的指令
v-text
相当于 {{}}，只能设置文本
v-html
如果有html标签的话会被解析
v-show
等于js的show（）方法 ，将隐藏的对象显示
这个指定可以根据值的不同进行改变 如果为true为显示 false为隐藏
v-if
选择结构
v-elseif 、v-else
一般跟v-if进行配合使用
v-for
循环遍历
<!-- user为别名 index为索引 -->
<tr v-for="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.username}}</td>
<td v-text="user.pwd"></td>
</tr>
*<!-- item是别名 key是对象的属性名 -->*
<li v-for="(item,key) in user">{{key}}:{{item}}</li>v-on
绑定事件
<!-- 可以写函数---定义在methods中的方法 | 也可以写内联语句 下面这个叫内联语句-->
<button v-on:click="num++">{{num}}</button>
<!-- v-on可以写成@ 一般使用@ -->
<button @click="num++">{{num}}</button>
<!-- 只能点击一次 修改符-->
<button @click.once="num++">{{num}}</button>
v-bind
<div v-bind:id="user.username">{{num}}</div>
*<!-- 属性绑定的缩写 -->*
<div :id="user.username">{{num}}</div>
v-model
主键的双向绑定
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<!-- 验证计算属性的缓存 -->
<!-- computed 执行一次 -->
<h1>{{messageComputed}}</h1>
<h1>{{messageComputed}}</h1>
<!-- method执行两次 -->
<h1>{{messageMethod()}}</h1>
<h1>{{messageMethod()}}</h1>
<h1>{{messageComputed2}}</h1>
<h1>{{divHtml}}</h1>
<h1 v-text='divHtml'></h1>
<h1 v-html='divHtml'></h1>
<!-- true显示 false 隐藏 -->
<div v-show="status">看div是否显示</div>
<h1 v-if="status">if</h1>
<h1 v-else>else</h1>
<input v-model="message">
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<!-- user为别名 index为索引 -->
<tr v-for="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.username}}</td>
<td v-text="user.pwd"></td>
</tr>
</table>
<ul>
<!-- item是别名 key是对象的属性名 -->
<li v-for="(item,key) in user">{{key}}:{{item}}</li>
</ul>
<!-- 可以写函数---定义在methods中的方法 | 也可以写内联语句 下面这个叫内联语句-->
<button v-on:click="num++">{{num}}</button>
<!-- v-on可以写成@ 一般使用@ -->
<button @click="num++">{{num}}</button>
<!-- 只能点击一次 修改符-->
<button @click.once="num++">{{num}}</button>
<button v-bind:id="user.username">{{num}}</button>
<!-- 属性绑定的缩写 -->
<button :id="user.username">{{num}}</button>
<!-- 双向绑定 -->
<select v-model="message">
<option>opention01</option>
<option>opention02</option>
<option>opention03</option>
</select>
</div>
</body>
<script>
var ids = [1, 2, 3, 4, 5];
var app = new Vue({
el: '#app',
data: {
num: 0,
message: 'hello vue',
divHtml: '<a href="www.baidu.com">百度</a>',
status: false,
users: [{
username: 'admin',
pwd: 'pwd'
}, {
username: 'admin1',
pwd: 'pwd1'
}, {
username: 'admin2',
pwd: 'pwd2'
}, {
username: 'admin2',
pwd: 'pwd2'
}],
user: {
username: 'sofwin',
pwd: 'sofwin',
age: 18
}
},
methods: {
messageMethod: function() {
console.info("method")
var m = this.message;
for (var i = 0; i < ids.length; i++) {
m += ids[i];
}
return m;
}
},
//计算属性
computed: {
messageComputed: function() {
console.info("computed");
var m = this.message;
for (var i = 0; i < ids.length; i++) {
m += ids[i];
}
return m;
},
//默认是get 的 设置
//app.messageComputed2 = 'admin' 当进行修改的时候才能调用set的方法
messageComputed2: {
get: function() {
return this.message;
},
set: function() {
var m = this.message;
for (var i = 0; i < ids.length; i++) {
m += ids[i];
}
this.message = m;
}
}
},
//侦听器
watch: {
//key是要监听的属性
//当message发生变化的时候 ---就会调用
//参数1 变化后的数据的内容
//参数2 变化前的数据的内容
message: function(newVal, oldVal) {
console.info("message 发生变化了")
console.info("message的old:" + oldVal)
console.info("message的new:" + newVal)
if (newVal == 'hello vue1') {
this.status = true
} else {
this.status = false
}
}
}
})
// app.messageComputed2 = 'admin'
</script>
</html>四、组件
1、组件的创建
<script>
//按钮的组件
const Feature = Vue.component('sofwin-button', {
//组件中用data 只能是function
data: function() {
return {
count: 0,
buttonName: 'sofwin'
}
},
template: '<button @click="count++">{{buttonName}}{{count}}</button>'
})
</script>注意：如果使用的单元程序，需要将定义的组件引入到当前页面中来
2、代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 组件引用直接使用第一参数的标签 -->
<sofwin-button :testmess="message"></sofwin-button>
<sofwin-button></sofwin-button>
<com-1></com-1>
<com-2></com-2>
</div>
</body>
<script>
//按钮的组件
const Feature = Vue.component('sofwin-button', {
props: ["testmess"],
//组件中用data 只能是function
data: function() {
return {
count: 0,
buttonName: 'sofwin'
}
},
template: '<button @click="count++">{{buttonName}}{{count}}|{{testmess}}</button>'
});
//按钮的组件
const Feature2 = Vue.component('sofwin-button', {
props: ["testmess"],
//组件中用data 只能是function
data: function() {
return {
count: 0,
buttonName: 'sofwin'
}
},
template: '<button @click="count++">{{buttonName}}{{count}}|{{testmess}}</button>'
});
var vm = new Vue({
el: '#app',
data: {
message: 'zzz'
},
//局部定义组件
components: {
'com-1': Feature,
'com-2': Feature2
}
})
</script>
</html>五、脚手架的创建
基于node.js ,安装node.js ，默认会按照npm
安装完毕后测试如下----》就安装成功了
1、官方文档
2、起步
npm install -g @vue/cli
3、检查
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
vue -V
4、创建一个项目
首先在一个选定位置创建文件夹 然后进入进窗口输入
4.1 黑窗口的交互式
vue create hello-world
hello-world是项目名---可以随便改你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
也可以选择自定义 就是选择Manually这一行进入
这里我使用的vue2的默认情况
出现后就完成了创建
4.2 图形化界面的创建
vue ui 
允许后就会自动弹出一个页面
选择目录进行创建
点击下一步
等待即可
五、简单的vue，前端的增删改查
修改这个文件
<template>
<div id="app">
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
<th>序号</th>
<th>操作</th>
</tr>
</thead>
<tr v-for="(user,index) in users " :key="user.id">
<td>{{index+1}}</td>
<td>{{user.userName}}</td>
<td>{{user.password}}</td>
<td>{{user.age}}</td>
<td>
<a href="javascript:void(0)" @click="edit(user.id)" >修改</a>
<a href="javascript:void(0)" @click="remove(user.id)">删除</a>
</td>
</tr>
</table>
<button @click="toAdd">新增</button>
<!-- 新增和修改 -->
<form v-show="isShow">
用户名<input type="text" v-model="user.userName" ><br>
密码<input type="text" v-model="user.password"><br>
年龄<input type="text" v-model="user.age"><br>
<button type="button" @click="save">保存</button>
</form>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
// components: {
// HelloWorld
// },
data: function(){
return {
//存放后端请求得到的数据
users: [],
isShow: false,
//用于新增
user: {}
}
},
methods :{
toAdd:function(){
this.isShow=true;
},
save:function(){
console.info(this.user.id)
// 修改
if(this.user.id!=undefined){
console.info("11")
for(var i=0;i<this.users.length;i++){
var item=this.users[i];
if(item.id==this.user.id){
//修改
this.users[i]=this.user
}
}
}//新增
else{
this.users.push(this.user);
}
//清空user
this.user={}
this.isShow=false
},
edit:function(id){
this.selectById(id);
this.isShow=true
},
//通过id来查找对象
selectById:function(id){
for(var i=0;i<this.users.length;i++){
var item=this.users[i];
if(item.id==id){
this.user=item;
}
}
},
remove:function(id){
for(var i=0;i<this.users.length;i++){
var item=this.users[i];
if(item.id==id){
//第一个参数是 删除的索引
this.users.splice(i,1)
}
}
}
},
//在挂载前
beforeMount: function(){
//一般这个是发布异步请求得到数组
var users= [
{id:1,userName:'admin',password:'123',age:11},
{id:2,userName:'admin2',password:'123',age:12},
{id:3,userName:'admin3',password:'123',age:13},
{id:4,userName:'admin4',password:'123',age:14}
]
this.users=users;
}
}
</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>
GitHub 加速计划 / vu / vue
109
19
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：4 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)