• vue不用脚手架

    1.vue.js就是MVVM中的ViewModel层的实现者

    2.用html引入vue：

    1.新建一个项目文件夹“第一个Vue应用程序”
2.在文件夹下新建一个index.html

    3.index.htm内容：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue.js-->
    <title>第一个Vue应用程序</title>
</head>
<body>
    <!--MVVM中，view层只能通过viewmodel来对接model,即只能展示viewmodel中的内容，不能直接展示model中的内容-->
    <!--view展示层-->
    <div id="app">
        {{ message }}  <!--显示data中的数据-->
    </div>

    <!--viewmodel脚本控制层-->
    <script>
        //Vue（），就是viewModel层的内容
        var app = new Vue({
            el: '#app', //el为element的缩写，挂载元素
            data: {  //这个data,就是model层，即数据内容
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

    4.在浏览器中访问这个index.html的文件路径，即可展示内容

    5.展示数据绑定的内容：

    1.打开浏览器访问index.html
2.按F12，开始调试
3.在控制台输入：app.message='Hello!'
4.按回车键
5.页面中“Hello Vue!”变为“Hello!”
6.即为数据绑定

    6.Edge浏览器安装Vue.js devtools插件：https://blog.csdn.net/sinat_31213021/article/details/120036139

    7.安装了插件后，在打开VUE项目后，按F12 ，就可以找到Vue,然后在Root->data->Message中编辑Message的数据

    8.vue的生命周期图：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

    1.new Vue()到created之间时是初始化一些内容，
    2.created之后就会将data中的数据绑定到div层中，
    3.之后会进行mounted(构造函数，进行一些ajax请求)，
    4.然后进行一系统处理之后
    5.可以进入销毁

    9.条件渲染：

    1.在“第一个vue应用程序"文件夹下创建if-else.html
2.if-else.html内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue.js-->
    <title>条件渲染</title>
</head>
<body>
    <!--MVVM中，view层只能通过viewmodel来对接model,即只能展示viewmodel中的内容，不能直接展示model中的内容-->
    <!--view展示层-->
    <div id="app">
        <!--显示data中的数据-->
        <!--显示层使用v-if和v-else属性内容来作为if和else逻辑的显示-->
        <!--如果变量awesome的值为true,则返回v-if层的内容，为false，则返回v-else的内容-->
        <h1 v-if="awesome">Vue is awesome!</h1>
        <h1 v-else>Oh no </h1>

    </div>

    <!--viewmodel脚本控制层-->
    <script>
        //Vue（），就是viewModel层的内容
        var app = new Vue({
            el: '#app', //el为element的缩写，挂载元素
            data: {  //这个data,就是model层，即数据内容
                awesome: true
            }
        })
    </script>
</body>
</html>

    10.vux2.1中新增加else-if语句

    1.在“第一个vue应用程序"文件夹下创建else-if.html
2.else-if.html内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue.js-->
    <title>连续判断</title>
</head>
<body>
    <!--MVVM中，view层只能通过viewmodel来对接model,即只能展示viewmodel中的内容，不能直接展示model中的内容-->
    <!--view展示层-->
    <div id="app">
        <!--显示data中的数据-->
        <!--显示层使用v-if和v-else属性内容来作为if和else逻辑的显示-->
        <!--如果变量awesome的值为true,则返回v-if层的内容，为false，则返回v-else的内容-->
        <!--要用div包裹，使用type定义值-->
        <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>

    <!--viewmodel脚本控制层-->
    <script>
        //Vue（），就是viewModel层的内容
        var app = new Vue({
            el: '#app', //el为element的缩写，挂载元素
            data: {  //这个data,就是model层，即数据内容
                type: 'A'
            }
        })
    </script>
</body>
</html>

    11.列表渲染

    1.在“第一个vue应用程序"文件夹下创建for.html
2.for.html内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue.js-->
    <title>连续判断</title>
</head>
<body>
    <!--MVVM中，view层只能通过viewmodel来对接model,即只能展示viewmodel中的内容，不能直接展示model中的内容-->
    <!--view展示层-->
    <div id="app">
        <!--显示data中的数据-->
        <!--用ul来做父层，用li来做子层，用到v-for-->
        <!--v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。-->
        <!--用:key来绑定一个item的值，用message来定义item的属性值-->
        <ul id="example-1">
            <li v-for="item in items">
                {{ item.message }}
            </li>
        </ul>

    </div>

    <!--viewmodel脚本控制层-->
    <script>
        //Vue（），就是viewModel层的内容
        var app = new Vue({
            el: '#example-1', //el为element的缩写，挂载元素，#表示引用的是id值
            data: {  //这个data,就是model层，即数据内容
                items: [
                    { message: 'Foo' },
                    { message: 'Bar' }
                ]
            }
        })
    </script>
</body>
</html>

    12.事件处理v-on

    1.在“第一个vue应用程序"文件夹下创建on.html
2.on.html内容：
<!DOCTYPE html>

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><!--使用v-on，要导入此行-->
<head>
    <meta charset="UTF-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue.js-->
    <title>事件处理</title>
</head>
<body>
    <!--MVVM中，view层只能通过viewmodel来对接model,即只能展示viewmodel中的内容，不能直接展示model中的内容-->
    <!--view展示层-->
    <div id="app">
        <!--显示data中的数据-->

        <div id="example-2">
            <!-- `greet` 是在下面定义的方法名 ,需要在methods中定义一个方法-->
            <button v-on:click="greet">Greet</button>
        </div>

    </div>

    <!--viewmodel脚本控制层-->
    <script>
        //Vue（），就是viewModel层的内容
        var app = new Vue({
            el: '#example-2', //el为element的缩写，挂载元素，#表示引用的是id值
            data: {  //这个data,就是model层，即数据内容
                name:"vue.js"
            },
            // 在 `methods` 对象中定义方法
            methods: {
                greet: function () {
                    // `this` 在方法里指向当前 Vue 实例
                    alert('Hello ' + this.name + '!')
                }
            }

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

    13.Axios实现异步通信，主要用来实现AJAX异步通信：

    Axios官网：http://www.axios-js.com/zh-cn/docs/
使用Axios:
1.新建一个项目文件夹“Axios应用程序”
2.在项目文件夹下新建一个data.json
3.data.json文件内容：
    {
      "name":"你好",
      "url":"http://www.baidu.com",
      "links": [
        {
          "name":"Google",
          "url":"http://www.google.com"
        },
        {
          "name":"Baidu",
          "url":"http://www.baidu.com"
        },
        {
          "name":"Sougou",
          "url":"http://www.sougou.com"
        }
      ]
    }
    4.在项目文件夹下新建一个index.html 
    5.index.html的内容： 
    <!DOCTYPE html>
    <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">  <!--使用v-bind事件要导入此内容-->
    <head>
        <meta charset="UTF-8">
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue.js-->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!--引入axios.js-->

        <title>Axios应用程序</title>
    </head>
    <body>
        <!--MVVM中，view层只能通过viewmodel来对接model,即只能展示viewmodel中的内容，不能直接展示model中的内容-->
        <!--view展示层-->
        <div id="app">
            <!--显示data中的数据-->
            <div>
                名称：{{info.name}}
            </div>
            <div>
                <!--用v-bind来动态绑定一个属性，如href-->
                <!--target="_blank",表示点击标签a时，打开一个新的页面-->
                url：<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
            </div>
            <ul>
                <!--用v-for,来读取info中的links的内容-->
                <li v-for="link in info.links">
                    {{link.name}}--->{{link.url}}

                </li>
            </ul>
        </div>

        <!--viewmodel脚本控制层-->
        <script>
            //Vue（），就是viewModel层的内容
            var app = new Vue({
                el: '#app', //el为element的缩写，挂载元素
                data(){  //这个data,就是model层，即数据内容
                    return{ //用return返回一个数据
                        info:{
                            name:'',
                            url:'',
                            links:[]
                        }
                    }
                },
                //使用axios发送请求
                mounted(){
                    axios.get('data.json')  //通过axios的get函数获取一个路径
                        .then(response=>this.info=response.data) //then是一个自动转换，将响应到的数据中的data赋值给定义的info
                }

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

    14.表单输入双向绑定

    1.新建一个项目文件夹“表单输入绑定”
2.在“表单输入绑定"文件夹下创建index.html
3.index.html内容：
    

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue.js-->
        <title>表单输入绑定</title>
    </head>
    <body>
        <!--MVVM中，view层只能通过viewmodel来对接model,即只能展示viewmodel中的内容，不能直接展示model中的内容-->
        <!--view展示层-->
        <div id="app">
            <!--显示data中的数据-->
            <!--用v-model,绑定data中定义的message变量-->
            <!--使用v-model以后，定义的value值就不起作用了，而是会直接使用data中定义的变量message的值-->
            <input type="text" v-model="message" value="hello"/>
            <p> Message is：{{message}}</p>

            <!--选择框的双向绑定-->
            <select v-model="selected">
                <option disabled value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>

        <!--viewmodel脚本控制层-->
        <script>
            //Vue（），就是viewModel层的内容
            var app = new Vue({
                el: '#app', //el为element的缩写，挂载元素
                data: {  //这个data,就是model层，即数据内容
                    message: 'Hello Vue!',
                    selected: ''
                }
            })
        </script>
    </body>
    </html>

    15.组件，即模板

    1.新建一个项目文件夹“Vue组件”
2.在“Vue组件"文件夹下创建index.html
3.index.html内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue.js-->
    <title>Vue组件</title>
</head>
<body>
    <!--MVVM中，view层只能通过viewmodel来对接model,即只能展示viewmodel中的内容，不能直接展示model中的内容-->
    <!--view展示层-->
    <div id="app">
        <!--显示data中的数据-->
        <ul>
            <!--my-component-li组件使用v-for来读取data中leixinglist的内容,遍历每一项为leixingone-->
            <!--通过v-bind,将v_for中获取到的leixingone的值，赋值给zujianleixingone，对应props中的参数zujianleixingone-->
            <my-component-li v-for="leixingone in leixinglist" v-bind:zujianleixingone="leixingone"></my-component-li>  <!--使用组件my-component-li-->
        </ul>
    </div>

    <!--viewmodel脚本控制层-->
    <script>
        //定义一个组件
        //第一个参数为组件的名字
        //第二个参数为组件的内容
        //第二个参数中的template,为html显示层的模板
        Vue.component("my-component-li",{
            props:["zujianleixingone"],   //组件中传入的变量leixingone不能被template中的内容直接使用，需要用props来获取变量，然后再在template中使用
            template:'<li>{{zujianleixingone}}</li>'   //模板中使用组件中传入的zujianleixingone的变量参数
        })


        //Vue（），就是viewModel层的内容
        var app = new Vue({
            el: '#app', //el为element的缩写，挂载元素
            data: {  //这个data,就是model层，即数据内容
                leixinglist:["美女","帅哥","萝莉","御姐"]

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

     16.计算属性（计算属性时用来声明式的描述一个值依赖了其他的值）

    1.新建一个项目文件夹“计算属性”
2.在“计算属性"文件夹下创建index.html
3.index.html内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue.js-->
    <title>计算属性</title>
</head>
<body>
    <!--MVVM中，view层只能通过viewmodel来对接model,即只能展示viewmodel中的内容，不能直接展示model中的内容-->
    <!--view展示层-->
    <div id="app">
        <!--显示data中的数据-->
        <!--调用函数方法，要带有括号-->
        <p>当前时间方法： {{getCurrentTimeMethods()}}</p>
        <!--调用计算属性，不嫩带括号-->
        <p>当前时间计算属性： {{getCurrentTimeComputed}}</p>
    </div>

    <!--viewmodel脚本控制层-->
    <script>
        //Vue（），就是viewModel层的内容
        var app = new Vue({
            el: '#app', //el为element的缩写，挂载元素
            data: {  //这个data,就是model层，即数据内容
                message: 'Hello Vue!'
            },
            //定义方法
            methods:{
                getCurrentTimeMethods:function () {
                    return Date.now();
                }
            },
            //定义计算属性
            //计算属性中定义的方法的名字和methods中定义的方法的名字不能重名，否则会报错
            computed:{
                getCurrentTimeComputed:function () {
                    return Date.now();
                }
            }
        })
    </script>
</body>
</html>

    17.插槽与自定义事件（插槽是为了确定组件摆放的位置）

    18.自定义事件
  • 相关阅读:
    XML 约束
    XML 高级
    XML 基础
    XML系列【目录】
    Java11 新特性
    Java10 新特性
    Java9 新特性 （二）语法改进
    Java9 新特性 （一）新增特性
    第一章：Class 文件结构
    java面试题全集（上）--java基础
  • 原文地址：https://www.cnblogs.com/jingzaixin/p/16462490.html
Copyright © 2020-2023  润新知