前言js

问js是什么，他有什么作用，与html和css的区别是什么
JavaScript（简称JS）是一种脚本语言，用于在网页上实现交互效果、动态效果和动态数据更新等功能。它是一种解释性语言，需要在浏览器中解释和执行。
JavaScript可以用来实现很多功能，包括但不限于：

网页交互：JavaScript可以用来实现按钮点击、表单验证、下拉菜单等网页交互功能。
动态效果：JavaScript可以用来实现动画、图片轮播、页面滚动等动态效果。
数据更新：JavaScript可以用来实现页面数据的动态更新，例如通过Ajax技术从服务器获取最新数据并更新到页面上。
与HTML和CSS相比，JavaScript是一种编程语言，而HTML和CSS是用于网页布局和样式设计的标记语言。HTML用于描述网页的结构和内容，CSS用于描述网页的样式和布局，而JavaScript用于实现网页的交互和动态效果。
另外，HTML和CSS是静态语言，一旦页面加载完成，它们的内容就不会再发生改变。而JavaScript是一种动态语言，它可以在页面加载完成后继续执行，并实现动态更新和交互效果。
问:js对象在代码中如何表示
答在JavaScript中，对象是一种复合数据类型，用于将数据和功能组织在一起。对象可以通过对象字面量、构造函数、Object.create()等方式创建。

对象字面量是一种创建对象的简单方式，可以在代码中直接定义对象的属性和方法。例如：

var person = {
  firstName: "John",
  lastName : "Doe",
  age      : 50,
  eyeColor : "blue",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Vue

jQuery类库选择器
前端框架

1.Vue介绍

Vue是一款新进式JavaScript框架，用来动态构建用户界面。
。遵循MVVM模式
。编码简洁、体积小、运行效率高，适合移动/PC端开发。
。本身只关注UI,可以轻松引入vue插件或其它第三库开发项目。
。国内大规范使用、生态系统完善。
宫网地址：https:/cn.vuejs.org
作者：尤雨溪，曾就职Google。

1.入门案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
<!-- 是的，您的理解是正确的。new Vue({})是一个对象，{}花括号的内容也是一个对象。 -->
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app', //el属性这个new vue（）括号内相当传入对象 {}在js表示一个对象，# 正好对应id选择器 这个vue对象el和上述div产生某种联系
        data: {
            message : "Hello Vue"
        }

    })
</script>
</body>
</html>

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。

2.MVVM

中间
在这里插入图片描述
vue是如何做到将模型中数据渲染到视图中的呢中间有个组件叫ViewModel
我:那也就是说将Model数据通过modelview传递给view中
new bing:是的，ViewModel是连接View和Model的桥梁，主要作用是对Model进行封装，提供给View使用。 ViewModel通过双向绑定将Model数据传递给View中，同时也将View中的数据传递给Model。
疑问解答
双向数据绑定
Vue.js的双向数据绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的1。在Vue.js中，可以通过v-model实现双向绑定2。所谓双向绑定，指的是Vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。
{}语法说明

{{}}中可以插入文本，上面的案例就是
{{}}中可以插入JavaScript表达式；

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

{{}}中只支持表达式，不支持其它语句；

<!-·这是语句，不是表达式->
{{var a=1}}
<!--流控制也不会生效，请使用三元表达式-->
{{ if (ok){return message }}

2.常用指令

可以用在div、p、span、a、h1-h6等有内容的标签上，为标签插入内容

v-text插入普通文本
v-html插入HTML代码片段

v-text 和 v-html

使用 v-html 指令用于输出 html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
<!--插值  view -->
<div id="app">
   <div v-text="author"></div>
   <div v-text="message"></div>
   <div v-html="message"></div>

</div>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app', //element
        data: {
            author: '尤雨溪',
            works: 'vue',
            message: '<h1>Hello Vue!</h1>',
            number: 0,
            isShow: true
        }
    })
</script>
</body>
</html>

在这里插入图片描述
动态這染的HTML容易导致XSS攻击，只对可信内容使用v-html插值，绝不要对用户提供的内容使用插值。

v-bind

{{}}、v-text、v-html语法不能作用在HTML标签的属性上：
v-bind指令可以用于响应式地更新HTML标签的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
<!--插值  view -->
<div id="app">
 <a v-bind:href="url">{{content}}</a>
 <button v-bind:disabled="disabled">按钮</button>
<!-- 简写模式 v-bind: -->
  <a :href="url">{{content}}</a>
 <button :disabled="disabled">按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app', //element
        data: {
                url: 'http://www.baidu.com',
                content: '百度',
                disabled: false        
        }
    })
</script>
</body>
</html>

v-on

v-on 指令，它用于监听 DOM 事件：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
<!--插值  view -->
<div id="app">
   <!-- <button οnclick="alert()">点击</button> -->
   {{count}} <br>
   <!-- count + =1 这里count是可以直接访问data区的内容的 -->
   <button v-on:click="count += 1">点击</button> <br>
   <!-- 简写 -->
   <button @click="count += 1">点击</button> <br>
   <!-- 我们想处理复杂时间 显然count+1已经满足不了我们,我们可以将次数事件的绑定和函数一起 -->
   <button @click="funCount" :disabled="disabled">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
    let vm=new Vue({
        el: '#app', 
        data: {
           count:0,
           disabled:false
        },
        methods : {
            funCount :function(){
                if(this.$data.count==  10){
                    this.$data.disabled=true;
                    alert('')
                }else{
                    this.count+=1;
                }
                
            }
        }
    })
    //console.log(vm.$data.count)
</script>
</body>
</html>

在这里插入图片描述

内联处理器中的方法
除了直接绑定到一个方法，也可以在内联JavaScript语句中调用方法：

事件冒泡和捕获

冒泡这个按钮在button上的它会将父容器及之上的事件接连触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        button {
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
<div>
    <button>按钮</button>
</div>

<script>
    // 冒泡
    document.querySelector('div').addEventListener('click',function () {
        alert('div')
    },false);
    document.querySelector('button').addEventListener('click',function () {
        alert('button')
    },false);

    // 捕获
    // document.querySelector('div').addEventListener('click',function () {
    //     alert('div')
    // },true);
    // document.querySelector('button').addEventListener('click',function () {
    //     alert('button')
    // },true);
</script>
</body>
</html>

默认就是冒泡
在这里插入图片描述
捕获改为true 则是相反的

事件修饰符

在事件处理程序中调用event.preventDefault0或event.stopPropagation(是非常常见的需求。
为了解决这个问题，Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素及子元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
    <div id="app">
        <a href="https://www.baidu.com/" @click.prevent="fun">百度</a>
    </div>
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            methods: {
                fun: function () {
                    alert('aaa')
                }
            },
        })
    </script>
</body>
</html>

a标签默认有跳转事件加上@click.prevent 就不跳转了。而且先触发@click里面的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        button {
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <div @click="funDiv">
        事件冒泡
        <button @click="funButton">按钮</button>
        <a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
    </div>
    <hr>
    <div @click="funDiv">
        阻止冒泡
        <button @click.stop="funButton">按钮</button>
        <a href="http://www.baidu.com" @click.prevent.stop="funHref">百度</a>
    </div>
    <hr>
    <div @click.self="funDiv">
        阻止冒泡
        <button @click="funButton">按钮</button>
        <a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
    </div>
    <hr>
    <div @click.capture="funDiv">
        事件捕获
        <button @click="funButton">按钮</button>
        <a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            funDiv: function () {
                alert('div')
            },
            funButton: function () {
                alert('button')
            },
            funHref: function () {
                alert('href')
            }
        }
    })
</script>
</body>
</html>

事件修饰符 v-if

符合条件我们就渲染到html文档中反之不符合就不渲染渲染：将元素添加到文档中不符合则移除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>

<body>
    <div id="app">
        请输入年龄:
        <input type="text" v-model="age"><br>
        {{typeof age}}
        <div v-if="age">
            您的年龄是：{{age}}
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                age: null
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

体会渐进式是原来从头到尾往下执行不会停而这个vue渐进式你走一点输入11 他就对于11 或输入其他的
会再次执行这次v-if这个判断一直判断若null 则无dom元素有就执行接下来操作(始终触发v-if再次执行)
动态渲染是你输入的html标签也会动态变化在操作dom文档满足v-if条件才渲染到页面上

Vue 的渐进式指的是 Vue.js 框架可以逐步应用到项目中，也就是说，可以先使用 Vue.js 的一部分功能，然后再逐渐引入其他功能，以适应项目的需求。这样可以使项目变得更加灵活，同时也可以降低学习成本和开发难度。

动态渲染是 Vue.js 的核心特性之一，指的是 Vue.js 可以根据数据的变化自动更新视图。在 Vue.js 中，只需要将数据绑定到视图上，当数据发生变化时，视图会自动更新，无需手动操作 DOM。动态渲染可以提高开发效率，减少出错的可能性。

v-show

带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS property display.
v-show 和 v-if 不一样这里面不管v-show的条件成立与否都会将所在的标签渲染到dom中只是显示与不显示通过css样式控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
<div id="app">
    请输入年龄:
    <input type="text" v-model="age"> <br>

    <!-- {{ typeof age}}-->
    <div v-if="parseInt(age)">
        您的年龄是：{{age}}
        <div v-if="age<18">未成年</div>
        <div v-else-if="age<30">有位青年</div>
        <div v-else-if="age<60">步入青年</div>
        <div v-else-if="age<150">进入老年</div>
        <div v-else>输入错误</div>
    </div>
    <div v-else-if="age != null">输入错误</div>

    <div v-show="age>=18">已成年</div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            age: null
        }
    })
</script>
</body>
</html>

在这里插入图片描述

v-show 只是把限定条件去除而已

v-if是真正的条件這染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重
建。
v-if是惰性的：如果在初始渲染时条件为假，则什么也不做直到条件第一次变为真时才会渲染条件
块。
v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
v-if有更高的切换开销，而v-show有更高的初始渲染开销。如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

列表渲染 v-for

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法alias in expression,为当前遍历的元素提供别名：
alias 临时变量 expresssion 数组每次从数组拿出一个数据给临时变量
expression支持的类型 number|string|array|object|Iterable(2.6新增)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
    <div id="app">
      <span v-for="num in 10">{{num}}</span> <br>
      <span v-for="str in 'abcdefg'">{{str}}</span> <br>
      <span v-for="str in ['a','b','c']">{{str}}</span><br>
      <span v-for="item in arr">{{item}}</span>
      <ul>
        <li v-for="item in arr">{{item}}</li>
      </ul>
      <ul>
        <li v-for="item in user">{{item}}</li>
      </ul>
      <ul>
        <li v-for="item in userList">{{item}}</li>
      </ul>

      <div v-for="user in userList">
            用户名：{{user.username}}
            手机：{{user.mobile}}
      </div>
     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
    <div id="app">
      <span v-for="num in 10">{{num}}</span> <br>
      <span v-for="str in 'abcdefg'">{{str}}</span> <br>
      <span v-for="str in ['a','b','c']">{{str}}</span><br>
      <span v-for="item in arr">{{item}}</span>
      <ul>
        <li v-for="item in arr">{{item}}</li>
      </ul>
      <ul>
        <li v-for="item in user">{{item}}</li>
      </ul>
      <ul>
        <li v-for="item in userList">{{item}}</li>
      </ul>

      <div v-for="user in userList">
            用户名：{{user.username}}
            手机：{{user.mobile}}
      </div>

      <div v-for="user in userList">
        <ul>
            <li v-for="item in user">{{item}}</li>
        </ul>
      </div>
    </div>


<script src="js/vue.js"></script>
<script>
        new Vue({
            el: '#app',
            data: {
                age: null,
                arr:['java','c++','php'],
                user:{
                    username: 'admin',
                    mobile: '18888'
                },
                userList:[{
                    username: 'admin',
                    mobile: '18888'
                }, {
                        username: 'super',
                        mobile: '18888'
                }]
            }
        })
</script>
</body>

</html>
    </div>

<script src="js/vue.js"></script>
<script>
        new Vue({
            el: '#app',
            data: {
                age: null,
                arr:['java','c++','php'],
                user:{
                    username: 'admin',
                    mobile: '18888'
                },
                userList:[{
                    username: 'admin',
                    mobile: '18888'
                }, {
                        username: 'super',
                        mobile: '18888'
                }]
            }
        })
</script>
</body>

</html>

在这里插入图片描述
索引
在v-for块中，我们可以访问所有父作用域的属性。v-for还支持一个可选的第二个参数，即当前项的索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
    <div id="app">
        <div v-for="(item,index) in arr">
            {{msg}}--{{index}} --{{item}}
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'课程',
                age: null,
                arr: ['java', 'c++', 'php']
                
            }
        })
    </script>
</body>

</html>

v-for遍历对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
    <div id="app">
        <!-- value:对象属性的值
        name:对象属性的名称
        index 索引 -->
        <div v-for="(value,name,index) in user">
            {{index}}:{{name}}:{{value}}
        </div>
    </div>


    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '课程',
                age: null,
                user: {
                    username: 'admin',
                    mobile: '18888'
                },
                arr: ['java', 'c++', 'php']

            }
        })
    </script>
</body>
</html>

v-model

在Vue中，v-model是一个指令，用于实现双向数据绑定，它可以将表单元素的值与Vue实例中的数据属性进行绑定。当表单元素的值发生变化时，Vue实例中的数据属性也会相应地更新，反之亦然。v-model指令可以用在各种表单元素上，如input、textarea、select等。例如，v-model="message"可以将一个input元素的value值与Vue实例中的message属性进行双向绑定。

你可以用 v-model 指令在表单<input>、<textarea> 及 <select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
解读：表单实例上的值就不管了，所以正确使用vue的姿势是所有的数据来源于model中的data，而不是表单上手动设置值
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
    <div id="app">
        <div>
            <label>用户名</label> <input type="text" v-model="user.username">
        </div>
        <div>
            <label>简介</label> <textarea v-model="user.intro">{{user.intro}}</textarea>
            
        </div>
        {{user.username}}<br>
        {{user.intro}}
    </div>
   
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{
                    username: 'admin',
                    intro: '我是jack'
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

v-model复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
<div id="app">
    <div>
        <div>
            <label>用户名</label> <input type="text" v-model="user.username">
        </div>
        <div>
            <label>简介</label> <textarea v-model="user.intro">{{user.intro}}</textarea>
        </div>
        <div>
            <label for="">爱好</label>
            <input type="checkbox" v-model="user.love" value="1"> <label>羽毛球</label>
            <input type="checkbox" v-model="user.love" value="2"> <label>篮球</label>
            <input type="checkbox" v-model="user.love" value="3"> <label>足球</label>
        </div>
        {{user.username}}
        {{user.intro}}
        {{user.love}}
    </div>
</div>
   <hr>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{
                    username: 'admin',
                    intro: '我是jack',
                    love: []
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

因为 love 不是 true或false 是个空数组绑定的是value属性如果是ture或false v-model会绑定到checked属性？是这样么理解吗？
是的，您的理解是正确的。如果love属性是一个空数组，那么v-model会绑定到value属性上。如果love属性是一个布尔类型的值，那么v-model会绑定到checked属性上。在上述代码中，因为love属性是一个空数组，所以v-model绑定到value属性上，而不是checked属性。如果love属性是一个布尔类型的值，那么v-model会绑定到checked属性上，这个属性的值只能是true或false。