vue实现在线运行python编辑器 vue.js python

目录

• 一、如何引用Vue
• 二、如何使用Vue
• 三、Vue的基本语法
• 四、如何操作标签

• 1. 操作单个标签
• 2. 操作多个标签
• 3. 解决Vue对象只能检索第一个匹配到结果的问题

一、如何引用Vue

1. 首先去官网下载：Vue官网

生产版本:vue.js
开发版本：vue.min.js(压缩版本的vue.js)

2. vue.js文件的引入

• 打开pycharm，新建一个文件夹vue_js，将我们下载的开发者版本vue.min.js和生产者版本vue.js两个文件放在这个vue_js文件夹下。
• 然后新建一个vue引入.html文件

回到顶部

二、如何使用Vue

我们知道Vue是一个渐进式的javascript框架，它可以操作一个标签，一组标签，以及整个html文章的标签，所以接下来我们来看一下它式如何操作一个标签的

回到顶部

三、Vue的基本语法

1. 首先我们要在html页面中引入Vue的js文档
<script src='/文件名/Vue.js'></script>

2.实例化一个Vue对象，去给需要操作的标签传值
<script>
	new Vue({
        el:'标签名/类属性值/id属性值',
        data:{
            'msg':'操作标签的需要的变量值',
        }
    })
</script>

回到顶部

四、如何操作标签

1. 操作单个标签

回到顶部

针对上面的定义一个标签后，我们如何来使用Vue去操作这个p标签呢？----看图！

2. 操作多个标签

回到顶部

问题1：根据上面的图示，我们发现为什么同样的两个p标签，引用了两个同样的msg变量，也用了Vue对象来选择了p标签，并且也给p标签的msg传了值，但是我们发现只有第一个p标签接收到了vue对象传过去的msg变量的值

那我们再看看是否可以利用类属性选择器来实现呢？

问题2：根据上面的单独利用标签选择器和类属性选择器，我们看到的结果都只有第一个p标签接收到了Vue对象传给p标签的msg变量的值

那我们能否直接在body标签或者html标签中设置挂载点呢？

问题3:我们在上面通过标签选择器和类属性选择器都只有第一个p标签接收到了Vue对象传的msg变量的值了，所以我们想到了用body标签来给这两个p标签都传msg变量值，我们发现用了body当挂载点的时候，连第一个p标签都接收不到Vue对象传的msg变量的值了

总结原因如下:

1. el:挂载点，采用css选择器语法与页面标签进行绑定，然后来决定Vue对象控制标签的作用范围  
2.挂载点只检索到页面第一个符合条件的匹配结果，所以挂载点一般都只采用id选择器
3.页面中的body标签和html标签不能作为挂载点

3. 解决Vue对象只能检索第一个匹配到结果的问题

问题：根据以上的问题，当用标签选择器和类属性选择器的时候，只能有第一个符合条件的标签能够应用这个Vue对象

解决如下：

我们可以将需要用到Vue对象的传数据的时候，给它放在同一个标签里面比如放在div标签中，用id选择器

回到顶部