VUE框架

一、VUE

        1、vue基础

                ①、{{}}: 插值表达式
                        插值表达式的作用：通常用来获取Vue实例中定义的数据(data)属性节点中 不能够使用插值表达式

                ②、 el: 挂载点
                        el的作用 ：定义 Vue实例挂载的元素节点,表示vue接管该区域。
                        Vue的作用范围是什么：Vue会管理el选项命中的元素,及其内部元素。
                        el选择挂载点时,是否可以使用其他选择器 ：可以,但是建议使用 ID选择器。
                        是否可以设置其他的DOM元素进行关联：可以但是建议选择DIV, 不能使用HTML和Body标签。

                ③、data: 数据对象
                        Vue中用到的数据定义在data中
                        data中可以写复杂类型
                        渲染复杂类型数据的时候,遵守js语法

                ④、代码示例

{{name}}

        2、vue常用指令

                ①、v-text 指令

                        作用: 获取data数据, 设置标签的内容。
                        注意: 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容。

    

    
    
百度
    
    
{{message}}百度
    
    

    

    
    

                ②、v-html 指令

                作用: 设置元素的 innerHTML (可以向元素中写入新的标签)

    

    
    {{message}}
    

    

    
    

    

    
    
    
    
    

                ③、v-on 指令

                作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click="方法"。

                绑定的方法定义在 VUE实例的, method属性中。

  


    

    
    
    
    
    
    
    
    
{{food}}
    
    
  
    

                ④、计数器

  
  


    

    
    

    
    {{num}}
    
    
    
    
   
    

                ⑤、v-show指令

                作用: v-show指令, 根据真假值,切换元素的显示状态

                ⑥、v-if 指令

                作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )

                ⑦、v-bind 指令

                作用: 设置元素的属性 （比如:src,title,class）

  
  


    

    
    
    
    
    
    
v-bind指令
    
    
    
    
    

                ⑧、v-for 指令
                作用: 根据数据生成列表结构
                数组经常和 v-for结合使用,数组有两个常用方法:
                        push() 向数组末尾添加一个或多个元素
                        shift() 把数组中的第一个元素删除

  
  


    

    
    
    

    
    

    {{index+1 }}城市: {{item}}
    
    
    
    

    {{p.name}}
    
    
    
    
    
    

                ⑨、v-on 指令补充

                 作用：传递自定义参数 : 函数调用传参，

                            事件修饰符: 对事件触发的方式进行限制。

                ⑩、v-mode 指令

                 作用: 获取和设置表单元素的值(实现双向数据绑定)
                双向数据绑定：
                        单向绑定: 就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
                        双向绑定: 用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

  
  


    

    
    
    
    
    
    
    
{{message}}
    
    
    
    
    

        3、axios

                ①、axios介绍：axios专门用来发送请求，其内部还是ajax，在浏览器中可以帮助我们完成 ajax异步请求的发送，并且封装之后使用更加方便。

                ②、使用axios

                        步骤一：导包

                        步骤二：请求方式,GET或者POST

get方式：

axios.get(地址?key=value&key2=value2).then(function(response){},function(error)
{});

post方式：

axios.post(地址,{key:value,key2:value2}).then(function(response)
{},function(error){})

                ③、解决页面闪烁问题

                        第一步：添加样式

                        第二部：在i刷新数据位置添加 v-cloak

                4、computed 计算属性

                        在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读，这时候可以用computed进行优化，减少运算次数。

  
  


    

    
    
    
{{res2}}
    
{{res2}}
    
    
     

        5、filter 过滤器

                ①、概念：过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原 来的数据，只是在原数据的基础上产生新的数据。

                ②、过滤器使用位置

                        双括号插值内：

{{ msg | filterA }} msg是需要处理的数据, filterA是过滤器, | 这个竖线是管道,通过这个管道
将数据传输给过滤器进行过滤 加工操作

                        v-bind绑定的值的地方：

 {{ msg }} 

                ③ 、局部过滤器

  
  


    

    
电脑价格: {{price | addIcon}}
    
    
   
    

                 ④、全局过滤器

  
  


    

    
{{user.name | changeName}}
    
    
    
    

        6、watch 侦听器

                作用: 当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性

    

    名：
    姓：
    {{fullNameComputed}}
    
    
    

        7、Component 组件

                ①、概念：组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。我们将相同的功能进行抽取,封装为组件,这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

                ②、语法格式

                        全局组件：

Vue.component("组件名称", {
template: "html代码", // 组件的HTML结构代码
data(){ //组件数据
return {}
},
methods: { // 组件的相关的js方法
方法名(){
// 逻辑代码
}
}
})

                        局部组件：

new Vue({
el: "#app",
components: {
组件名: {
// 组件结构
template: "HTML代码",
// data数据
data() { return { msg:"xxxx" };},
},
},
});

        8、Vue Router 路由

                在Web开发中，路由是指根据URL分配到对应的处理程序。 路由允许我们通过不同的 URL 访问不同的 内容。

                ①、路由相关概念：
                        router :是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得易如反掌 ,router 就相当于一个管理者，它来管理路由。
                        route: ruter相当于路由器, route就相当于一条路由.比如: Home按钮  => home内容， 这是一条route,news按钮 => news内容， 这是另一条路由。
                        routes :是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， {about按钮 => about 内容}]。
                        router-link组件:router-link 是一个组件，是对标签的一个封装. 该组件用于设置一个导航链接，切换不同 HTML内容。 to 属性为目标地址， 即要显示的内容。
                        router-view 组件:路由导航到指定组件后,进行渲染显示页面。

                ②、使用路由

                        载入 vue-router 库：

//方式1: 本地导入

//方式2: CDN

                        使用步骤：

                        第一步：定义路由所需的组件

                        第二步：定义路由 每个路由都由两部分 path (路径) 和component (组件)

                        第三步：创建router路由器实例 ,管理路由

                        第四步：创建Vue实例, 注入路由对象, 使用$mount() 指定挂载点

  
 
  


    

    
渣浪.com
    

    
    go to home
    go to news