04-Vue:计算属性、侦听器、脚手架

最新推荐文章于 2022-12-11 19:13:10 发布

weixin_51339105

最新推荐文章于 2022-12-11 19:13:10 发布

阅读量165

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_51339105/article/details/125989906

版权

Vue.js 计算属性侦听器 vue-cli 项目搭建

关键词由CSDN通过智能技术生成

前端学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.计算属性

一个变量的值，依赖另外一些数据计算而来的结果
注意：计算属性也是vue数据变量，所以不能和data里变量重名，用法和data相同的
语法：
computed:{
“计算属性名”(){
return 值
}
}

<!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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
         <input type="text" v-model.number="num1">
         +
         <input type="text" v-model.number="num2">
         =
         <input type="text" v-model.number="sum">
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                num1:0,
                num2:0,
                // sum:0
            },
            // 1.计算属性和data属性都是变量-----不能重名
            // 2.页面第一次加载，计算属性就会执行  赋初始值
            // 3.函数内的依赖的变量变化，会自动重新计算结果返回
            // 优势：带缓存；依赖的变量不变，多次调用都是从缓存取值，
            //       依赖的变量改变，函数会自动重新执行，并缓存新的值
            computed:{
                // 必须有return  return的值就是计算属性的值
                sum(){
                    return this.num1 + this.num2;
                }
            }
        })

    </script>
</body>
</html>

计算属性也是变量，如果想要直接赋值，需要使用完整写法
语法：
computed:{
“计算属性名”:{
set(值){

 },
 get(){
  return '值'
 }

}
}

<!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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
         姓名：<input type="text" v-model="full">
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                
            },
            computed:{
               full:{
                // 给full赋值触发set方法
                set(val){
                   console.log(val)
                },
                // 使用full值触发get方法
                get(){
                   return "hello"
                }
               }
            }
        })

    </script>
</body>
</html>

2.侦听器

可以侦听data/computed属性值改变
语法：
//浅侦听侦听的是基本数据类型
watch:{
‘被侦听的属性名’(newval,oldval){

}
}

//侦听复杂数据类型深度侦听
watch：{
// 侦听复杂数据类型
‘被侦听的属性名’:{
handler(newval,oldval){
console.log(newval,oldval,“深度”)
},
deep:true, //深度监听 (对象里层的值改变)
// immediate:true, //立即监听（网页打开handler执行一次
}
}

3.vue脚手架

vue-cli快速搭建vue项目的，使用webpack管理项目
1.把vue-cli模块包安装到全局，电脑就有了vue命令，就能创建脚手架工具；
2.安装命令
npm install -g @vue/cli

yarn add global @vue/cli
3.检测是否安装成功
vue -V
4.搭建项目
创建项目vue create 项目名称
上下键选择 Manually

在这里插入图片描述
按上下键+空格键选择

选择2.x版本

进入项目目录
cd 项目目录
启动项目
npm run serve

4.项目目录结构

node_modules 项目依赖的第三方包
public 静态文件目录
index.html 但页面的html文件（网页浏览的就是它）
src 业务文件夹 &****
assets 静态资源
components 组件目录
HelloWorld.vue 欢迎页面的vue代码文件
APP.vue 整个应用的根组件
main.js 主入口文件
.gitignore git提交忽略的配置
babel.config.js babel配置
package.json 依赖包列表
README.md 项目说明
vue.config.js vue的配置文件

weixin_51339105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04-Vue:计算属性、侦听器、脚手架

/immediatetrue,//立即监听（网页打开handler执行一次。注意计算属性也是vue数据变量，所以不能和data里变量重名，用法和data相同的。//依赖的变量改变，函数会自动重新执行，并缓存新的值。//优势带缓存；//必须有returnreturn的值就是计算属性的值。//1.计算属性和data属性都是变量-----不能重名。deeptrue,//深度监听(对象里层的值改变)//3.函数内的依赖的变量变化，会自动重新计算结果返回。...
复制链接

扫一扫