v u e

呆桃啵啵猪

已于 2022-05-19 09:15:19 修改

阅读量1k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-05-18 20:53:42 首次发布

本文链接：https://blog.csdn.net/weixin_45701868/article/details/124824047

版权

v-bind属性操作class和style的实例代码

5.2 v-if、v-elseif、v-else

7.2 理解handler方法及immediate属性

7.3 理解deep属性

7.4 watch 和 computed的区别

7.5计算属性和watch的区别

7.6computed和methods的区别？

8.VUE生命周期钩子

8.1 vue数据是怎么驱动视图的

8.2 vue生命周期钩子

9.VUE完整示例new vue()参数详解

1.理解MVVM思想

什么是MVVM？MVVM是Model-View-ViewModel的缩写。

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

2.vue.js介绍

Vue是一套用于构建用户界面的渐进式的轻量级框架
Vue是MVVM设计模式的具体实现方案
Vue只关注视图层，便于与第三方库或既有项目整合
Vue可以与现代化的工具链和各种类库结合使用，为复杂的SPA提供驱动

3.vue起步

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue的引入</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--{
  {}} vue的语法插值表达式, 两对大括号内部对应的变量是vue对象的data属性-->
            {
  {message}}
        </div>
    </body>
    <script>
        //创建vue对象
        let app = new Vue({
            //vue对象挂载到id='app'的元素上
            el: "#app",
            //data是vue数据属性, 定义的数据统一放到data中
            data: {
                message: "hello vue",
            }
        });
    </script>
</html>

4.模板语法

Vue.js中使用的是基于html的模版语法，可以将Dom元素绑定至Vue实例中的数据。
页面中模版即就是通过{ {}}方式来实现模版数据绑定。

4.1 数据绑定的方式

单向绑定
- 方式1：使用两对大括号{ {}}
- 方式2：使用v-text、v-html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>插入data中message属性名对应值:{
  {message}}</p>
            <!--v-html  [看做超链接]-->
            <p>v-html指令插入html代码:<span v-html="rawHtml"></span></p>
            <!--v-text  [看做文本获取代码]-->
            <p>v-text指令插入文本代码:<span v-text="rawHtml"></span></p>
            <!--v-once  [数据只绑定一次]-->
            <p v-once>v-once绑定一次{
  {message}}</p>
        </div>
    </body>
    <script>
        let app = new Vue({
            //vue对象挂载到id='app'元素上
            el: "#app",
            //定义数据
            data: {
                message: "hello vue",
                rawHtml: "<a href='http://www.baidu.com'>百度</a>"
            }
        })
    </script>
</html>

双向绑定
- v-model指令实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>双向绑定</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p v-once>v-once 绑定一次:{
  {message}}</p>
            <p> input 的双向绑定值:{
  {message}}</p>
            <input type="text" v-model="message"><br><br>
            <textarea v-model="message"></textarea><br>
            <!--单选框-->
            <input type="radio" value="男" v-model="gender">男
            <input type="radio" value="女" v-model="gender">女<br>
            <p>gender的值:{
  {gender}}</p><br>
            <!--复选框-->
            <input type="checkbox" value="吃" v-model="hobbies">吃
            <input type="checkbox" value="喝" v-model="hobbies">喝
            <input type="checkbox" value="玩" v-model="hobbies">玩
            <input type="checkbox" value="乐" v-model="hobbies">乐
            <br>
            <p>hobbies的属性值:{
  {hobbies}}</p>
            <br>
            <!--下拉菜单-->
            <select v-model="city">
                <option value="tj">天津</option>
                <option value="sh">上海</option>
                <option value="bj">北京</option>
            </select>
            <p>city的属性值:{
  {city}}</p>
            <br>
            <!-- 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 -->
            <!-- v-model.lazy  change 之后同步数据 -->
            lazy 在 change 之后同步数据:<input type="text" v-model.lazy="message"/><br>
            trim 自动去掉用户输入的前后空格:<input type="text" v-model.trim="message"/><br>
            number 转换用户输入的值为数值类型:<input type="text" v-model.number="message"/><br>
            <!-- 写在前面不转，写在后面的字母会转，从第一个不能转的后面全部清除 -->
        </div>
    </body>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                message: "hello vue",
                gender: "男",//默认男
                hobbies: ['吃', '喝'],
                city: "tj",
            }
        });
    </script>
</html>

4.2 其他指令

v-once 数据只绑定一次

5.常用指令

5.1 v-bind

1、v-bind
- 使用v-bind指令进行DOM属性绑定
v-bind 用法：
- v-bind:属性名="属性值"
- 简写 :属性名="属性值"
  - :src=""
style和class属性用法：
- style:
  - .txt{color:#ff0000;} .bgcolor{background-color: #ccc;}
- html:
  - <span :class="{txt:true,bgcolor:true}">文本内容</span>
v-bind属性数据绑定代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p v-bind:id="dynamicId">v-bind绑定属性和值</p>
            <p :id="dynamicId">v-bind简化方式绑定属性和值</p>
        </div>
    </body>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                dynamicId: "E01020"
            }
        });
    </script>
</html>

v-bind属性操作class和style的实例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .active {
                color: yellow;
            }

            .bgCo

最低0.47元/天解锁文章

呆桃啵啵猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v u e

目录1.理解MVVM思想2.vue.js介绍3.vue起步4.模板语法4.1 数据绑定的方式单向绑定双向绑定4.2 其他指令5.常用指令5.1 v-bindv-bind属性数据绑定代码：v-bind属性操作class和style的实例代码5.2 v-if、v-elseif、v-else5.3 v-for5.4 v-on6.计算属性get和set方法7.监听属性7.1 监听属性watch7.2 理解handler方法及immedi
复制链接

扫一扫

专栏目录