vue学习

文章时效性提示

这是一篇发布于 1150 天前的文章，部分信息可能已发生改变，请注意甄别。

理所当然的开始学框架,vue3.x

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

使用

还是三种方法

下载文件本地用,CDN和npm

然后需要脚手架. vue-cli

使用

npm i -g @vue/cli

官方命令行工具，可用于快速搭建大型单页应用

开始项目

这样就开始

vue init webpack projectname

然后会进行一系列配置,现在可以都选no,后面再改.

然后进入项目

npm run dev
或者 
npm run start

会在8080端口开启服务,注意也可以对配置文件进行修改换端口.

这是开始一个vue项目.通过vue这个命令行对于构建vue项目有很多帮助.

当然也可以不用,直接引入vue.js即可.同时菜鸟教程推荐了Vite工具使用npm下载

MVVM模式

M：Model 即数据逻辑处理

V：View 即视图（用户界面）

VM：ViewModel 即数据视图，用于监听更新，View 与 Model 数据的双向绑定

所以，Vue 一大特点就是数据双向绑定，另一大特点就是响应式.

<!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>syl-vue</title>
    <!-- 通过方式引入 vue.js -->
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
  </head>
  <body>
    <!-- 数据双向绑定 -->
    <div id="app">
      <input type="text" />
      <p>{{msg}}</p>
    </div>
    <script>
      var app = new Vue({
        el: '#app', //el: 挂载点

        data: {
          //data:数据选项

          msg: 'hello',
        },
      });
    </script>
  </body>
</html>

模板语法

允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析，通俗的讲 Vue 模板语法就是在使用 Vue.js 开发时，你可以写在 HTML 元素上的操作语法，让你开发更高效，例如：绑定样式，循环出元素列表等。

const app = {
data(){
return {/*数据*/}
}
}
Vue.createApp(app).mount('#app');

mount用于挂载

data是一个函数,应该返回一个对象,$data形式存储在组件实例中

双大括号

{{}}

通过使用 v-once 指令你也能执行一次性地插值，当数据 改变时，插值处的内容 不会更新。但是需要注意一下，该元素节点下面其他数据的绑定，数据改变，内容也不会更新，所以，注意代码块的划分

v-html

渲染为html

3.v-bind 渲染属性

4.v-on 监听事件

5.v-model

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值

v-if等指令

methods

组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象

参数

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

修饰符

事件修饰符
按键修饰符
系统修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

v-bind与v-on简写

<a :href=""></a>

<!-- 完整语法 -->
<button v-on:click="handleClick">点我</button>
<!-- 缩写 -->
<button @click="handleClick">点我</button>

v-if

v-else

v-else-if

v-show

计算属性

computed:{
get:function(){
	//return ...
	},
set:function(){
	//this.
}
}

惰性

侦听属性

watch关键字

watch:{
msg:funciton(new,old){
	//
}
}

过滤器

在 Vue 中我们有一个专门处理数据过滤的东西：过滤器。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

<p>{{msg2|getString}}</p>
<p v-bind:class="msg2|getString"></p>

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
    
<script>
const app = {
  data() {
    return {
      counter: 1
    }
  }
}
vm = Vue.createApp(app).mount('#app')
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

class与style的绑定

1.给 v-bind:class 一个对象，以动态地切换 class

<div :class="{ 'active': isActive }"></div>

同时还有数组绑定法

2.我们可以把一个数组传给 v-bind:class

<div class="static" :class="[activeClass, errorClass]"></div>

style的绑定方法,同时也有数组与对象的方法.

<div id="app">
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

div id="app">
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

还有很多东西,应该可以看了官方文档.后面直接实战算了.

更新

鸽了太久了…