vue2 part1

E___V___E

于 2024-08-22 19:22:02 发布

阅读量970

点赞数 28

文章标签： vue.js

本文链接：https://blog.csdn.net/E___V___E/article/details/141333301

版权

一套用于构建用户界面的渐进式JavaScript框架
Vue可以自底向上逐层的应用
简单应用：只需一个轻量小巧的核心库
复杂应用：可以引入各式各样的Vue插件

优化的本质就是加中间件，如果不够就再加一层

Vue有很完整的生态，周边库一大堆

awesomejs.dev/for/vue/ 这个网站有部分优秀

搭建vue环境

找不到“学习”的朋友点开“文档”找到“Vue2文档”点击就有同样的界面了

vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications. (github.com)

从Installation | Vue Devtools (vuejs.org)安装，

<script type ="text/javascript" >
    Vue.config.productionTip =false//阻止vue启动生成生产提示
</script>

强制刷新：shift+(点击)刷新

在vscode打开你的代码，就在5500端口生成服务器，老师准备了ico文件，在 c盘里搜索favicon,找一个。拖到根目录即可。就显示在浏览器标题了

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>初识Vue</title>
    <!--引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--
    1.想让vue工作，就必须创建一个vue实例，且传入一个配置对象
    2.root容器的代码仍然符合html语法，不过混入特殊vue指令。
    3.root容器的代码被称为vue模板，vue实例的作用是将模板与数据绑定起来。-->
    
    <!-- 准备一个容器-->
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。
        //创建Vue实例
        new Vue({
            el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            //也可以用class，不过就变成.class了，不如用id。
            data: {//data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象。
                name: '尚硅谷'
            }
        })
    </script>
</body>

</html>

细节

一个vue实例不能同时接管2个容器，如右图

2个vue实例不能结管1个容器，会error

代码中

<h1>Hello,{{name}}，{{address}},{{1+1}},{{Date.now()}}</h1>
//都可以正常表达
name.toUpperCase()变成大写
//
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

注意区分：js表达式和 js代码（语句）
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1).a
(2).a+b
(3).demo(1)
(4).x== y?'a':'b'
2.js代码（语句）
(1).if(){}
(2).for(){}

如果没有new 一个vue，而是用开发版本的vue，就会error，但是生产vue就不第一个报错

模板语法

容器的作用：1、为vue实例提供模板，指定vue实例要显示的的内容的位置

1.插值语法2.指令语法

Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件....）。
举例：v-bind:href="xxx"或简写为：href="xxx",xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????,此处我们只是拿v-bind举个例子。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>模板语法</title>
    <!--引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <div id="root">
        <h1>插值语法</h1>
        <h3>hello, {{name}}</h3>
        <hr />
        <h1>指令语法</h1>
        <a v-bind:href="URL" v-bind:title="hello">点我学习</a><!-- 千万不要在 v-bind 的后面加空格否则报错！！！-->
        <a  :href="URL" title="hello">点我学习2</a>
        <!-- v-bind可以简写为: -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            URL: 'http://www.atguigu.com',
            hello: '你好你好'
        }
    })
</script>

</html>

对于new vue可以设置多个层级，如下图

数据绑定

v-bind就是单向数据绑定，v-model是双向的数据绑定

个人理解v-model一般只能用于带有value属性的元素，只是适合表单属性元素

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title> Vue数据绑定</title>
    <!--引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--
Vue中有2种数据绑定的方式：
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。
-->
    <!--准备好一个容器-->
    <div id="root">
        <!--普通写法 -->
        <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="name"><br/> -->
        <!--简写-->
        单向数据绑定：<input type="text" :value="name"><br />
        双向数据绑定：<input type="text" v-model="name"><br />
        <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
        <!-- <h2 v-model:x="name">你好啊</h2> -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。 // 阻止vue在启动时生成生产提示。
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
        }
    })
</script>

</html>

el和data的两种写法

有人建议看54集

在f12里面，有$开头的，这是vue构造的实例，但是实例缔造的原型对象上：proto中有许多$，mount

v.$mount('#root')

也可以mount，这么说mount是挂载的意思，就是linux里面的mount，h1的模板交给new vue的实例，解析

//data的两种写法
new Vue({
    el:'#root',
    //data的第一种写法：对象式
    /* data:{
    name:'尚硅谷'
    }*/

    //data的第二种写法：函数式
    data: function(){
        return{
            name:'尚硅谷'
        }
    }
})
不能写成箭头函数，箭头函数的this为window

mvvm

是微软发明的，首次运用于wpf

老师，我发现你的套路了，你就写$符开头的，不带$符的咋都不写呢

不是data有，而是data的东西最终出现了vm中

<div id="root">
    <h1>学校名称:{{name}}</h1>
    <h1>学校地址:{{address}}</h1>
    <h1>测试一下1:{{1+1}}</h1>
    <h1>测试一下2:{{$options}}</h1>
    <h1>测试一下3:{{$emit}}</h1>
</div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生
    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            address: '北京',
            a: 1
        }
    })
    console.log(vm)
</script>

object.defineproperty

重要知识点：defineProperty：方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象和 get读取/set修改

name，sex和age，第三个参数的值不参与枚举

let number=18
let persom={
name:'tom'
sex:'man'
age:number
}
这是age在f12是18，就是改了number为20也还是18

值传递和引用传递

这里本质上并没有给age赋值为number，只是访问age属性的时候返回了number的值，所以number变化 age也会跟着变化.有人修改age时 set函数就会被调用且会受到修改的值:

本质是age已经改了，但又调用了getter读取了number的值并做了二次修改

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title> 回顾object.defineproperty </title>
    <!--引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <script type="text/javascript">
        let number = 18
        let person = {

            name: '张三',
            sex: '男',
        }
        Object.defineProperty(person, 'age', {
            // value: 18，
            // enumerable:true,/控制属性是否可以枚举，默认值是false
            // writable:true,//控制属性是否可以被修改，默认值是false
            // configurable: true //控制属性是否可以被删除，默认值是false


            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get() {
                console.log('有人读取age属性了')
                return number
            },

            //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value) {
                console.log('有人修改了age属性,且值是', value)
                number = value
            }

        })
        // console.log(Object.keys(person)

        console.log(person)
    </script>
</body>

</html>

E___V___E

关注

28
点赞
踩
27

收藏

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

一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用简单应用：只需一个轻量小巧的核心库复杂应用：可以引入各式各样的Vue插件优化的本质就是加中间件，如果不够就再加一层Vue有很完整的生态，周边库一大堆awesomejs.dev/for/vue/ 这个网站有部分优秀。
复制链接

扫一扫