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.自定义事件

 

posted on 2022-07-10 07:28  大话人生  阅读(763)  评论(0)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2024 大话人生
Powered by .NET 9.0 on Kubernetes