初识vue

vue

1 渐进式框架
2 vue 版本：最新3.x，主流用2.x
3 第三方：vue-cookie，vue-router，vuex：状态管理器
​
4 M-V-VM思想：数据的双向绑定（*****）
Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中
View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
​
​
5 组件化开发、单页面开发
    -vue-cli:vue的脚手架---》创建出Vue工程
        
6 版本使用的是2
​
​
7 解释型的语言是需要解释器的
js就是一门解释型语言，只不过js解释器被集成到了浏览器中
​
所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样
​
nodejs：一门后端语言
把chrome的v8引擎（解释器），安装到操作系统之上

开发常见编辑器

1 ide:
    python--->pycharm,vscode(免费)，juptyer    （anaconda）
    go------->goland,vscode(免费)
    java----->IDEA , myeclipse,eclipse
    前端----->webstorm,sublinetext,Hbuilder(nui-app),vscode,pycharm：vue插件
    php------>phpstrom
    c/c++---->clion
    安卓开发---->androidstadio---->谷歌公司买了授权+adt
        
2 捷克的jetbrains公司出的，后期不管做什么语言，简易都用他家的

下载

下载对应vue的js文件

创建一个项目

1.导入js 配置
    <script src="./js/vue.js"></script>
2.新建html项目
实例化得到对象,传入一些参数
<script>
    let xxx = new Vue({
        el: '#ID',     // el这个参数名称固定
        data: {
            name: 'xxx',
        },methods:{ }  //事件
    })
</script>

模板语法

<div id="app">
​
    <p>
        名字：{{name}}
    </p>
    <p>
        数组：{{t}}
    </p>
    <p>
        数组的第一个值：{{t[1]}}
    </p>
    <p>
        对象：{{obj}}
    </p>
    <p>
        对象取值：{{obj.name}}
    </p>
    <p>
        s字符串：{{s}}
    </p>
        条件？值：值
    <p>三目运算符： {{100>20?'是':'否'}}</p>
</div>

指令之文本指令

v-html  让HTML字符串渲染成标题
v-text  标签内容显示js变量对应的值
v-show  放1个布尔值：为真 标签就显示；为假 标签就不显示
v-if    放1个布尔值：为真 标签就显示；为假 标签就不显示

指令之事件指令

v-on:事件      触发事件（不推荐）
@事件          触发事件（推荐）
@[event]      触发event事件（可以是其他任意事件）
​
eg：
​
                    事件      函数名
<input type="text" @input="handlerInput" v-model="xxx">
​
<botton v-on:click='函数名'>点击</botton>
​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>{{name}}</h1>
​
    <hr>
    <input type="text" @input="handlerInput" v-model="name1">
    <hr>
    <div v-if="display"><h2>消失又出现之v-if</h2></div>
    <button @click="handlerClick">点击</button>
    <hr>
    <div v-show="display"><h2>消失又出现之v-show</h2></div>
    <hr>
</div>
</body>
<script>
    let vu = new Vue({
        el: '#d1',
        data: {
            name: 'xxx',
            name1: '',
            display:'true'
        },methods:{
            handlerInput(){
                console.log(this.name1)
            },handlerClick(){
                this.display = ! this.display
            }
        }
    })
</script>
​
</html>



posted @ 2021-07-12 18:59  代码歌  阅读(137)  评论(0)    收藏  举报