vue语法、安装vite、property 组件属性、计算属性 watch深度监听

安装vite

首先需要安装node.js，因为需要使用到npm
在终端

安装成功 （App.vue为根组件）

npm版本为6.x npm init vite@latest 项目名 --template vue
npm版本为7+ npm init vite@latest 项目名 -- --template vue
查看npm版本 npm -v
cd 项目名
npm install 简写npm i
npm run dev

创建好的一个项目在关闭后，再次打开的步骤

打开目标项目文件夹路径下的集中终端，输入指令npm run dev即可。

property 组件属性

组件methods，props，computed，inject和setup等。组件实例的所有property。无论如何定义，都可以在组件的模板中访问。

Vue语法

插值：文本
Mustache（双大括号{{ }}）
替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

指令
v-once :只渲染一次，数据改变时，插值处的内容不会更新
<p v-once >{{ uname }}</p>
v-html :让内容以html的形式显示。
<p v-html="方法名"></p>
v-bind ：动态绑定属性的内容
<p v-bind:id="id">v-bind绑定</p>
<img v-bind:src="url" alt="">

语法糖 ：

<p v-bind:id="id">v-bind绑定</p>===<p :id="id">v-bind绑定</p>
v-bind: 语法糖 ：
v-on： 事件语法糖 @

JS表达式写法

<button @click="id='d2' ">改变颜色</button>
等于
<button @click="c">改变颜色</button>
methods:{
c(){
this.id='d2'
 }}
 
<!-- 动态参数 -->
<!-- 动态属性 -->
<p  v-bind:[id变量名]="id">v-bind绑定</p>
<!-- 动态事件 -->
<button @[点击事件变量名]="id变量名='class'">改变为class属性</button>
<button @click="点击事件变量名='mouseover'">改变事件</button>

Date property 和方法

在后端还没有传回值的时候定义一个初始值在Date中
age来接受后端返回回来的值。先定义一个初始值0
age：0

方法为
methods
在methods写方法时不要写箭头函数。

计算属性

只要依赖值不变，那么就不会重新计算。因为有缓存，再次计算的话，会取缓存不需要再次计算，默认为getter方法只读，每一个计算属性都有一个getter与setter

computed:{  //计算属性将基于它们的响应依赖关系缓存
  // 简写
 reverseMsg(){
   console.log("计算属性");
   return this.message.split('') .reverse().join("")
 },
// 每一个计算属性都有一个getter和setter
  <p>{{ message }}</p>中写计算属性。
  <!--js表达式 -->
  <p>{{ message.split('') .reverse().join("")}}</p>
  <!-- 计算属性 -->
  <p>{{ reverseMsg }}</p> //不用写()来调用
  <!-- 使用methods中的方法 -->
  <p>{{ reverseMessage() }}</p>

watch（侦听器）

watch监听不到对象的属性变化，就需要深度监听
newValue,oldValue 新的数据 老的数据
immediate:true,//初始化的时候调用函数
deep:true,//侦听器会监听对象一层一层向下遍历给对象

watch:{ //监听数据的变化
message(newValue,oldValue){
  console.log(newValue);
  console.log(oldValue);
  // 执行异步操作，或者复杂逻辑代码
}
},

深度监听

// 深层监听
message:{
  immediate:true,//初始化的时候调用函数
  handler(newValue){
    if(newValue.length<5 || newValue.length>10){
      console.log('输入框的内容不能小于5或者大于10');
  }
}
},
// 监听不到对象的属性变化，需要使用到深度监听deep
// user:{ 
//   handler:function(newValue){
//     console.log(newValue);
//   },
//   deep:true,//侦听器会监听对象一层一层向下遍历给对象
// }


"user.name":{//“ ”使用字符串的形式进行优化，只会单独监听对象中对应的属性
  handler:function(newValue){
    console.log(newValue);
  },
  deep:true,//表示是否深度监听
}