vue

最新推荐文章于 2022-08-19 16:24:09 发布

keep,moving

最新推荐文章于 2022-08-19 16:24:09 发布

阅读量98

点赞数

本文链接：https://blog.csdn.net/KeepMoving_ch/article/details/103477532

版权

A:vue介绍

vue：是一套渐进式前端框架
1:渐进式框架：意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。

2:框架和库的区别：
a*：框架：字面上理解为架子，为用户提供一整套解决方案，必须按照他的规则来写；
b库：像函数一样，只需要调用他的方法，怎样组织由自己决定；

3:模板插值
vue使用双大括号语法来进行文本插值

<div id="app">
 {{ message }}
</div>

4:构造器
每个vue应用都是通过构造函数vue来创造vue的根实例，实例化是需要传入数据，模板，挂载元素，方法，声明周期等。

new Vue({
 // 挂载元素
 el: '#app',
 // 数据
 data: {
 message: 'Hello Vue!'
 }
});

5:数据绑定

<body>
 <div id="app">
 <!-- Hello Vue! -->
 {{ message }}
 </div>
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
 <script>
 //将vue保存下来，方便后面改变数据
 const vm = new Vue({
 el: '#app',
 data: {
         message: 'Hello Vue!'
      }
 })
 </script>
</body>

6:声明周期
实例在创建阶段，挂载的事件监听，并实时更新

B:模板语法

1:插值

a：文本
数据绑定最常见的形式就是 (双大括号) 的文本插值：
通过使用 v-once 指令，插值后数据改变，不会更新

<p v-once>这个将不会改变: {{ msg }}</p>

b：原始HTML
{{}}会将数据解析为文本，而非html，要输出html要通过v-html

<div>{{htmlCode}}</div>
 <div v-html="htmlCode"></div>
 打印：
 '<span style="color:red">this is a test</span>
 this is a test

c：特性
如果要控制属性，可以让属性和data值进行绑定，通过v-bind指令

 <div id="app">
 <div v-bind:id="one" v-bind:class="two"></div>//缩写：class       ：id
 </div>
 <script>
 const app = new Vue({
 el: '#app',
 data: {
 one: 'bcd',
 two: 'abc'
 }
 })
 </script>
 打印：
  <div v-bind:id="bcd" v-bind:class="abc"></div>

d：使用 JavaScript 表达式
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

C:计算属性和侦听器

1:计算属性

属性
模板的初衷是用于简单运算的，在模板中放太多逻辑难以维护，所以任何复杂逻辑，都应当使用计算属性。

<div id="app">
     <p> {{Mess}}</p>
 </div>
 <script>
 const data = {
 Mess: 'Hello Vue!'
 }
 const vm = new Vue({
 el: '#app',
 data: data,
   computed: {
              Mess: function () {
                  return this.message.split('').reverse().join('');
            }
       },
 });
 </script>
</body>

方法

<div id="app">
 <p>{{ message }}</p>
 <!-- Hello Vue! -->
 <p>{{ reverseMess() }}</p>
 <!-- !euV olleH -->
 </div>
<script>
 const data = {
      message: 'Hello Vue!'
 }
 const vm = new Vue({
 el: '#app',
 data: data,
 methods: {
 reverseMess: function () {
 return this.message.split('').reverse().join('')
         }
     }
 });
 </script>

属性和方法的区别
计算属性只有在它相关依赖发生改变时才会重新求值，方法只要发生重新渲染，method调用会执行所有函数。

a:计算属性的 setter

computed: {
              fullName: {
                  // getter
                  get: function () {
                      return this.firstName + ’ ’ + this.lastName
                  },
                  // setter
                  set: function (newValue) {
                      var names = newValue.split(’ ')
                      this.firstName = names[0]
                      this.lastName = names[names.length - 1]
                  }
              }
          }

2:数据观察

提供watch来观察和响应data数据的变动

   <div id="app">
        <p @click=a++>{{a}}</p> 
    </div>

  const vm = new Vue({
            el: '#app',
            data: {
                a: 1
            },
            watch: {
                a: function(val, oldVal) {
                this.message = '新' + oldVal + '旧' + val;
            }
        }

除watch以外$watch也可以监听数据的变动，会返回一个函数，用来停止触发回调

   <div id="app">
        <p @click=a++>{{a}}</p> 
    </div>

 const vm = new Vue({
            el: '#app',
            data: {
                a: 1
            },

        });
        const w = vm.$watch('a', function (one, old) {
            console.log("新值" + one);
            console.log("旧值" + old);

            if (one === 10) {
                w();
            }
        })

D:Class 与 Style 绑定

绑定 HTML Class

对象语法

 <!-- <p :class="example">Lorem ipsum dolor sit.</p> -->
    const vm = new Vue({
            el: '#app',
            data: {
                example: {
                    abc:true,
                    bcd:true,
                    def:false,
                }
            },
        })

数组语法

    <p :style="[test1,test2]">Lorem ipsum dolor sit amet.</p>
     const vm = new Vue({
            el: '#app',
            data: {
                test: {
                    color: "skyblue",
                    fontSize: "20px"

                },
                test1: {
                    color: "green",
                },
                test2: {
                    fontSize: "18px",
                }
            },

        })

绑定内联样式

对象语法

     <div v-bind:style="test">Lorem ipsum dolor sit amet.</div>
     
     const vm = new Vue({
            el: '#app',
            data: {
                test: {
                    color: "skyblue",
                    fontSize: "20px"
                },
            },
        })

数组语法

     <div v-bind:style="[style1, style2]">Lorem ipsum dolor.</di>
     const vm = new Vue({
            el: '#app',
            data: {
                style1: {
                    color: "skyblue",
                    fontSize: "20px"

                },
                style2: {
                    color: "green",
                },
            },
        })

E:条件渲染

v-if指令

<h1 v-if="one">Vue is awesome!</h1>
<h1 v-else>Oh no </h1>

在元素上使用 v-if 条件渲染分组

<template v-if="one">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else指令

<div v-else>
 hello
</div>

v-else-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

用 key 管理元素
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。如果不要复用它们”。只需添加一个具有唯一值的 key 属性即可。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

F:列表渲染

1：使用v-for进行列表渲染
a:v-for指令要使用 stu in students形式的语法，students是数组，stu是迭代的别名：

<body>
    <div id="app">
        <p v-for=" stu in  students">my name is {{ stu.name }}҅I'm {{ stu.age }} years old.</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                 students: [
                    { 'name': 'dffghg', 'age': 18,"gender":"男" },
                    { 'name': 'fgrhj', 'age': 20,"gender":"男"  },
                    { 'name': 'rty', 'age': 2,"gender":"男"  }
                ]
            }
        });
    </script>
</body>

2：数组更新检测
a:变异方法
用了该方法会改变原数组
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

b:非变异方法
用了该方法不会改变原数组
concat
slice
map
filter

c:无法检测的数组
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
@1：利用索引直接设置一个
@2：修改数组长度时
如果要设置数组某一个具体的项目，可以使用vue实例的set方法，
而如果要改变数组的长度的话，使用splice来进行替代

G:事件处理

1：事件绑定

<body>
    <div id="app">
        <p @click="btn">Lorem ipsum dolor sit amet.</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            methods: {
                btn() {
                    window.alert('aaa');
                }
            }
        })
    </script>
</body>

a:为什么在html中监听事件？
是因为它不会有任何的维护困难，还有以下几个好处：
**·**看到html，并能轻松知道js里面对应的方法；
**·**更易于测试；
**·**当在html里销毁时，所有的事件会自动删除；

2：修饰符
·事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

·按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

鼠标按键修饰符：
.left
.right
.middle

修饰键
.ctrl
.alt
.shift
.meta

组件上的事件绑定
如需给组件绑定事件，可以写在组件的template模板里面

<body>
    <div id="app">
        <parent></parent>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        Vue.component('parent', {
            template: `
    <div>
    <p @click='test'>hello</p>
    </div>
    `,
            methods: {
                test() {
                    alert('click');
                }
            }
        });
        new Vue({
            el: '#app'
        });
    </script>
</body>

H:表单

1：基础语法
a：文本
可以用v-model指令在表单空间元素上进行双向绑定，v-model本质上不过是语法糖，负责监听用户的输入事件以更新数据。

<body>
    <div id="example">
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#example',
            data: {
                message: ''
            }
        })
    </script>
</body>

v-molel是：value和@input事件的语法糖，下面用：value和@input事件来改写v-model

<body>
    <div id="example">
        <input :value="message" placeholder="edit me" @input="message=$event.target.value">
        <p>Message is: {{ message }}</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#example',
            data: {
                message: ''
            }
        })
    </script>
</body>

b：多行文本

<body>
    <div id="example">
        <div>
            <span>Multiline message is:</span>
            <p style="white-space: pre-line">{{ message }}</p>
        </div>
        <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#example',
            data: {
                message: ''
            }
        })
    </script>
</body>

c：复选框

<body>
    <div id="example">
        <input type="checkbox" v-model="test">
        <span>{{ test }}</span>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#example',
            data: {
                test: true//复选框选中是值为true，没有选中未false
            }
        })
    </script>
</body>

d：单选按钮

<body>
    <div id="example">
        <div>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">one</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">two</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">three</label>
        </div>
        <div>
            <span>Checked names: {{ checkedNames }}</span>
        </div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#example',
            data: {
                checkedNames: []
            }
        })
    </script>
</body>

e：下拉列表

<body>
    <div id="app">
        <select name="" id="" v-model='city'>
            <option disabled value="">请选择城市</option>
            <option value="成都">成都</option>
            <option value="重庆">重庆</option>
            <option value="天津">天津</option>
            <option value="上海">上海</option>
            <option value="杭州">杭州</option>
        </select>
        <p>֦{{city}}</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                city: '',
            }
        });
    </script>
</body>

2：值绑定
a：复选框
b：单选按钮
c：选择列表

3：修饰符

I:vue组件

keep,moving

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue

A:vue介绍vue：是一套渐进式前端框架1:渐进式框架：意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。2:框架和库的区别：a*：框架：字面上理解为架子，为用户提供一整套解决方案，必须按照他的规则来写；b库：像函数一样，只需要调用他的方法，怎样组织由自己决定；3:模板插值vue使用双大括号语法来进行文本插值<div id="app"> {{ m...
复制链接

扫一扫