Vue入门

作者: lj72808up | 来源:发表于2019-12-24 17:13 被阅读0次

Vue 入门到实战课程
VUE系列教程目录
VUE系列教程目录
01vue-安装vue
Vue.js状态管理工具Vuex快速上手
Vue2简单入门
Vue.js再入门
Vue.js使用vue-router构建单页应用
vue基础入门
【前端全栈】1.从入门到工作

安装vue

npm install -g @vue/cli

创建vue项目

vue create hello-world

引入vue
通过script标签引入

<!--带注释版vue-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--不带注释版vue-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"> </script>-->

第一个vue程序

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="app">
        {{message}} {{name}}
    </div>

    <script>
    var app = new Vue({
        el:'#app',       // el属性: dom元素选择器
        data:{           // dom元素内的变量
            message:'hello vue',
            name:'VUE'
        }        
    })
    </script>
</body>

什么叫响应式
当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。也就是说如果你添加一个新的属性，比如：vm.b='hi', 那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="app">
        {{a}}
    </div>

    <script>
    var data = {a:1}
    var vm = new Vue({
        el:'#app', 
        data:data     
    })

    vm.$watch('a',function(newVal,oldVal){  // 当属性a发生变化时, 绑定$watch方法工作
        console.log(newVal,oldVal);
    })

    vm.$data.a = "test ...."
    vm.$data.a = "change test ...."
    vm.$data.a = "change test2 ...."   // 最终, 控制台只打印了最后的变量: change test2 .... 1

    </script>
</body>

生命周期函数

<script>
    var data = {a:1}
    var vm = new Vue({
        el:'#app', 
        data:data,
        // 生命周期钩子
        beforeCreate:function(){
            console.log("beforeCreate")
        },
        created:function(){
            console.log("created")
        },
        updated:function(){
            console.log("updated")
        }
    })
    // 如下方法, 在3s后把a的值变为"changed...", 且页面显示"changed..., 同时触发updated方法"
    setTimeout(function(){
        vm.a = "changed ... "
    },3000)
</script>

模板替换

<body>
    <div id="app">
        {{msg}}
        <p>Using mustaches: {{rawhtml}}</p> <!--{{}}模板维度不可以翻译成html的dom-->
        <p v-html="rawhtml"></p> <!--当给一个dom加上v-html属性后, 模板会被解析成html的dom-->

        <!--"{{}}"替换不能作用在html特性上, 这种情况下应该使用v-bind指令-->
        <div v-bind:class="color">test...</div> 

    </div>

    <script>
    var vm = new Vue({
        el:'#app', 
        data:{
            msg: "hello world",
            rawhtml: "<span style='color:red'>This should be red</span>",
            color: "blue"
        },
    })
    </script>

    <style type="text/css">
        .red{color:red}
        .blue{color:blue; font-size:100px}
    </style>

</body>

指令

指令是带有v-前缀的特殊特性
指令还可以附带属性, 就是在指令后面使用:field声明属性

<div id="app">
    <p v-if="seen">看到我了吧</p>
    <!--v-bind给dom绑定属性-->
    <a v-bind:href="url">我是百度</a>
    <!--v-on给dom绑定事件-->
    <div v-on:click="click1">
        <!--这里的stop是属性的修饰符, 标识当点击click me后, 只触发click2, 不触发click1-->
        <div v-on:click.stop="click2"> 
            click me !!! 
        </div>
    </div>
</div>

<script>
var vm = new Vue({
    el:'#app', 
    data:{
        seen:false,
        url:"http://www.baidu.com",
    },
    methods:{
        click1:function(){
            console.log("click1")
        },
        click2:function(){
            console.log("click2")
        }
    }
})

setTimeout(function(){  // 延时3秒出现文字
    vm.seen = true
},3000)
</script>

指令可以缩写:
- v-click缩写成:
- v-on缩写成@

条件渲染

v-if类型的条件渲染

<div id="app">
    <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>
</div>

<script>
var vm = new Vue({
    el:'#app', 
    data:{
        type:"A"
    }
})

v-show类型的条件渲染

<div id="app">
    <div v-show="show">haha </div>
</div>

<script>
var vm = new Vue({
    el:'#app', 
    data:{
        show:false  // 虽然对v-show设置了不显示, 但该dom仍然会被渲染, 只不过display为none
    }
})
</script>

列表渲染

<div id="app">
    <ul> <!--遍历列表-->
        <li v-for="item,index in items">{{index}}:{{item.message}}</li>
    </ul>

    <ul> <!--遍历-->
        <li v-for="value,key in object">{{key}}:{{value}}</li>
    </ul>
</div>

<script>
var vm = new Vue({
    el:'#app', 
    data:{
        items:[
            {message:"Foo"},
            {message:"Bar"}
        ],
        object:{
            title: 'how to do in Vue',
            author: 'Jane Dane',
            publishAta: '2016-10-04'
        }
    }
})
</script>

输入绑定

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="app">
        <!--文本-->
        <input v-model="msg" placeholder="edit me">
        <p>Message is : {{msg}}</p>
        <!--多行文本-->
        <span>multiline message</span>
        <p style="white-space:pre-line;">{{msg2}}</p>
        <br>
        <textarea v-model="msg2" placeholder="add text"></textarea>
        <br>

        <!--一个复选框-->
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">current: {{checked}}</label>
        <br>

        <!--多个复选框绑定到一个数组 (选中的复选框, 会把name属性加到checkedNames数组中)-->
        <input type="checkbox" id="jackId" value="jack_name" v-model="checkedNames">
        <label for="jack">jack</label>
        <input type="checkbox" id="johnId" value="john_name" v-model="checkedNames">
        <label for="john">john</label>
        <input type="checkbox" id="mikeId" value="mike_name" v-model="checkedNames">
        <label for="mike">mike</label>

        <span>checked names: {{checkedNames}}</span>
        <br>

        <!--单选绑定-->
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{selected}}</span>
        <br><br><br><br><br><br>
        <!--多选绑定-->
        <select v-model="selectedMulti" multiple style="width:50px">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{selectedMulti}}</span>
        <br><br><br><br><br><br>

        <!--v-for动态绑定-->
        <select v-model="selectedvfor">
            <!--这里用v-bind声明绑定的是option的value属性-->
            <option v-for="option in options" v-bind:value="option.value"> 
                {{option.text}}
            </option>
        </select>
        <span>Selected-v-For:{{selectedvfor}}</span>
        <br><br><br><br><br><br>

        <!--选择时进行值绑定-->
        <!-- 当选中时，`picked`属性的值绑定为"a" -->
        <input type="radio" v-model="picked" value="a">
        <span>{{picked}}</span>
        <!-- `toggle` 绑定为 true 或 false-->
        <input type="checkbox" v-model="toggle">
        <span>{{toggle}}</span>
    </div>

    <script>
    var vm = new Vue({
        el:'#app', 
        data:{
            msg:"" , // 赋初值
            msg2:"",
            checked:false,
            checkedNames:[],
            selected:"",    
            selectedMulti:[],   
            selectedvfor:"",
            options:[
                {text:'One', value:'A'},
                {text:'Two', value:'B'},
                {text:'Three', value:'C'},
            ],
            picked:"",
            toggle:"",
        }
    })
    </script>
</body>

vue组件
把经常使用的功能封装为"组件". 可以使用Vue.compnent声明组件. 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过new Vue创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<body>

    <div id="app">
        <button-counter title="button1: " @clicknow="clicknow"></button-counter>
        <button-counter title="button2: " @clicknow="clicknow"></button-counter>
    </div>

    <script>
        Vue.component('button-counter',{
            props: ['title'],  // props为控件增加的属性(该例子增加了title]属性)
            data:function(){  // 为组件声明数据
                return {
                    count:0
                }
            },
            // 变量作用于在组件内部. 有时组件内有多个dom, 可能会渲染失败, 此时可以用<div>标签包裹起来
            // 该模板下生成了一个button, 病绑定了click事件, 事件为触发clickfun函数. clickfun函数定义在控件内部 
            template: '<div><h2>Please</h2><button v-on:click="clickfun"> {{title}} click {{count}} times </button></div>' ,
            methods: {  // 为组件添加事件绑定
                clickfun: function(){
                    this.count++;
                    this.$emit('clicknow',this.count);
                }
            }
        })   
        
        var vm = new Vue({
            el: "#app",
            data:{
                totalcount:0,
                // 组件内部的变量可以不被初始化
            },
            methods:{
                clicknow: function(e){
                    this.totalcount++
                    console.log(this.totalcount)
                }
            }
        })
    </script>
</body>

单文件组件
- 安装npm (node.js中的)
- 安装vue-cli
```
npm install -g @vue/cli
```
- 安装webpack(打包器)
```
npm install -g webpack
```
- 项目创建
  1. 创建项目:
    vue ui -- z打开图形化界面创建项目
  2. public: 项目打包后可部署的文件'
  3. src: 代码
    |- components: vue定义的组件

Vue 入门到实战课程
Vue 入门到实战课程说明课程 VueCli3.0-小白入门 Vue2.0 小白入门教程 Vue 项目实战在...
VUE系列教程目录
VUE系列教程目录 vue入门之路篇系列教程： vue最简单的入门教程+实战+Vue2+VueRouter2+we...
VUE系列教程目录
VUE系列教程目录 vue入门之路篇系列教程：vue最简单的入门教程+实战+Vue2+VueRouter2+web...
01vue-安装vue
资源 1.Vue.js2.0从入门到放弃---入门实例（一）2.Vue.js入门学习（一）3.Vue官方中文Api...
Vue.js状态管理工具Vuex快速上手
Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...
Vue2简单入门
Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...
Vue.js再入门
Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...
Vue.js使用vue-router构建单页应用
Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...
vue基础入门
vue基础入门
【前端全栈】1.从入门到工作
2020年大热的前端技术：Vue3/TS/Flutter 1、分阶段：先导（JS入门、Vue入门等）入门阶段（...