学习Vue框架中必掌握的重点知识

• 一、什么是vue
• 二、与原生JS的区别
• 三、数据绑定
• 四、事件处理
• 五、列表渲染
• 六、条件渲染
• 七、Class与Style绑定
• 八、计算属性
• 九、侦听器
• 十、插槽

一、什么是vue

vue是一套用于构建用户页面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、与原生JS的区别

我们可以通过一个小案例来演示

案例：把输入框中的信息实时显示在span标签中

原生JS

  <span id='con'></span>

Vue

  <div id="app"> <span id='con'>{{msg}}</span></div>

区别：其中明显的区别就是省去了对DOM元素的操作

1. 创建DOM元素，使其成为Vue实例的挂载点，Vue实例中的所有数据这能在挂载点中使用

    <div id="app"> </div>

2. 通过new Vue来创建实例对象
3. el属性指定当前Vue实例的挂载点
4. data中是模型数据，这些数据依赖于当前Vue的实例，可以通过控制台输入app.msg来查看数据
5. 可以通过插值表达式使用data中的数据

三、数据绑定

数据绑定就是将Vue实例中的data属性中的数据显示在挂载点中

1、内容绑定

将data中的数据显示成内容

 <div id='app'> <p>{{msg}}</p></div>

若想显示html标签只要是标签中用v-html即可

 <div id='app'> <p>{{msg}}</p></div>

2、属性绑定

将data中的数据作为某个元素的属性值

使用v-bind即可，属性可以是内置的，也可以自定义的,简写方式:

 <p>{{msg}}</p>

3、表单标签的值

可以使用v-model指令在表单标签中使用双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

1、文本框和文本域

 <textarea><textarea>

2、复选框

 <div id='app'>  <label for="read">阅读</label><label for="play">游戏</label></div>

单选框

 <div id="app"> <label for="man">男</label><label for="women">女</label> {{gender}} </div>

下拉框

 <div id="app">  请选择北京上海 {{city}} </div>

传递参数

 <div id='app'> <button>按钮</button></div>

四、事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

 <div id="app"> <button></button></div>

 var app = new Vue({ el:'#app', data:{ name:'holle Vue' }, //在 methods 中定义方法 methods:{ greet:function(event){ //this在方法中指向Vue实例 alert(this.name + '!') if (event) { alert(event.target.tagName) } } })

五、列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

 <div id='app'> <ul> <li>{{blog}}</li></ul><ul> <li>姓名：{{stu.name}} 年龄：{{stu.age}}</li></ul></div>

 var app = new Vue({ el:"#app", data:{ blogs:['三国演习','西游记','老夫子'], stus:[ {name:'小明',age:18}, {name:'小张',age:11}, {name:'小王',age:12} ] } })

从服务器中获取数据

  <div id="app"> <ul> <li>{{item.title}}</li></ul></div>

六、条件渲染

1、v-if指令用于条件性的渲染一块内容

 <div>hello Vue</div>

2、也可以使用v-else添加一个else块

 <div>hello Vue</div><div>hello world</div>

3、在元素上使用v-if条件渲染分组

当需要切换多个元素的时候可以把v-if添加到template内，因为元素是一个不可见元素，渲染的结果将不包含元素

  <h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p>

4、v-if-else顾名思义就是充当v-if的else if块，可连续使用

 <div> 满分 </div><div>=80 && score 良好 </div><div>=70 && score 及格 </div><div v-else-if="score 不及格 </div><div> 请输入正确的成绩 </div>

5、v-show同样是根据条件展示元素

 <div>hello</div>

与v-if不同的是v-show的元素会始终被渲染并保留在DOM中。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

七、Class与Style绑定

我们可以使用v-bind来绑定类名或内联样式

绑定class,以动态的切换class,也可以与普通的class共存

 <div class="static"></div>

 data{ isActive:true hasError:false }

渲染结果为：

 <div class='static active'></div>

绑定内敛级样式

语法v-bind:style

 <div></div>

 data:{ activeColor:"red", fontSzie:13 }

也可以直接绑定到一个样式对象中，这样会使模板更清晰

 <div></div>

 data:{ active:{ color:'red', fontSize:'30px' } }

八、计算属性

当我们需要计算模板中的值时可以使用计算属性（computed）

 <div id="#app"> <p>{{message}}</p><p>{{reverseMessage}}</p></div>

 var app = new Vue({ el:"#app", data:{ message:"Hello" }, computed:{ reverMessage(){ return this.message.split('').reverse().join('') } } })

九、侦听器

侦听器可以观察和响应Vue实例上的数据变动

 <div id="app"> <div> 问题：</div><div>{{answer}}</div></div>

 var app = new Vue({ el: "#app", data: { question: "", answer: [], }, watch: { question(newValue) { this.getAnswer() } }, methods: { getAnswer: function () { let that = this axios.get('http://localhost:3000/answer.php?q=' + this.question) .then(function (response) { that.answer = response.data }) } } })

php代码

演示

 nswer = response.data

 php代码 ```php 

演示

十、插槽

插槽内容

 var el_div = { template: <div></div> }

 <div id="app">  <span>插槽内容</span></div>

当组件渲染时，slot会被替换为插槽内容。插槽内可以包含任何模板代码

后备内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 组件中：

 <button type="submit"> </button>

我们可能希望这个 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 标签内：

 <button type="submit"> Submit</button>

现在当我在一个父级组件中使用 并且不提供任何插槽内容时：

后备内容“Submit”将会被渲染：

 <button type="submit"> Submit </button>

但是如果我们提供内容：

  Save 

则这个提供的内容将会被渲染从而取代后备内容：

 <button type="submit"> Save </button>

具名插槽

有时我们需要多个插槽。例如对于一个带有如下模板的 组件：

 <div class="container"> <header> <!-- 我们希望把页头放这里 --></header> <!-- 我们希望把主要内容放这里 --><footer> <!-- 我们希望把页脚放这里 --></footer></div>

对于这样的情况， 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：

 <div class="container"> <header> </header> <footer> </footer></div>

一个不带 name 的 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

   <h1>Here might be a page title</h1><p>A paragraph for the main content.</p><p>And another one.</p> <p>Here's some contact info</p>

现在 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 中的内容都本文来源gaodai#ma#com搞*!代#%^码网5会被视为默认插槽的内容。

然而，如果你希望更明确一些，仍然可以在一个 中包裹默认插槽的内容：

   <h1>Here might be a page title</h1> <p>A paragraph for the main content.</p><p>And another one.</p> <p>Here's some contact info</p>

任何一种写法都会渲染出：

 <div class="container"> <header> <h1>Here might be a page title</h1></header> <p>A paragraph for the main content.</p><p>And another one.</p><footer> <p>Here's some contact info</p></footer></div>

以上就是学习Vue中必掌握的重点知识的详细内容，更多前端的相关知识的资料请关注gaodaima搞代码网其它相关文章！