Vue的简单入门

一、什么是Vue？

vue.js也一个渐进式JavaScript框架，可以独立完成前后端分离式web项目

渐进式：vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面，最后大到整个项目，都可以用vue框架来实现

目的：通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目

二、为什么要学习Vue

1.Vue是三大前端框架之一，其他2个为：Angular ，React

2.整合了Angular React框架的优点（Vue是中国人写的，第一手API文档是中文的）

3.单页面应用（得益于vue的组件化开发，令前台的代码可以复用）

4.虚拟DOM（提高操作DOM的效应）

5.数据驱动（将数据渲染到指定区域）

6.数据的双向绑定（在页面中完成基于数据的交互方式）

三、如何在页面中使用Vue

开发版本：vue.js

生产版本：vue.min.js

<body><div id="box1"><!--{{ }} 会被vue解析为数据的渲染的指定语法-->{{ }}</div><hr><div class="box2">{{ }}</div>
</body>
<script src="js/vue.js"></script>
<script>// 如何使用jq框架 <= 拿到jq框架的对象 $ | jQuery// 类比：如何使用vue框架 <= 拿到vue框架的对象 new Vue()// vue对象需要手动创建， 原因，一个vue对象可以只控制页面中的某一部分， 如果一个页面有多个部分都需要被控制，那么就需要创建多个vue对象// vue对象如何与控制的页面进行关联（绑定），采用的是vue对象中的挂载点(挂载点可以唯一标识页面中的某一个区域)new Vue({el: "#box1"// 挂在在id为box1的div上，那么该div下的所有内容都由该vue对象来控制
    })new Vue({el: '.box2'// 挂在在class为box2的div上，那么该div下的所有内容都由该vue对象来控制（尽量使用id，唯一标识）
    })
</script>

四、Vue实例

1.el：实例

new Vue({el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

2.data：数据

<div id='app'>{{ msg }}
</div>
<script>var app = new Vue({el: '#app',data: {msg: '数据',}})console.log(app.$data.msg);console.log(app.msg);
</script>
<!-- data为插件表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->

3.methods：方法

<style>.box { background-color: orange }
</style>
<div id='app'><p class="box" v-on:click="pClick">测试</p><p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>var app = new Vue({el: '#app',methods: {pClick () {// 点击测试
            },pOver () {// 悬浮测试
            }}})
</script>
<!-- 了解v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->

4.computed：计算

<div id="app"><input type="text" v-model="a"><input type="text" v-model="b"><div>{{ c }}</div>
</div><script>// 一个变量依赖于多个变量new Vue({el: "#app",data: {a: "",b: "",},computed: {c: function() {// this代表该vue实例return this.a + this.b;}}})
</script>

5.watch：监听

<div id="app"><input type="text" v-model="ab"><div>{{ a }}{{ b }}</div>
</div><script>// 多个变量依赖于一个变量new Vue({el: "#app",data: {ab: "",a: "",b: "",},watch: {ab: function() {// 逻辑根据需求而定this.a = this.ab[0];this.b = this.ab[1];}}})
</script>

6.delimiters：分隔符

<div id='app'>${ msg }
</div>
<script>new Vue({el: '#app',data: {msg: 'message'},delimiters: ['${', '}']})
</script>

五、生命周期钩子

表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数
钩子函数: 满足特点条件被回调的方法

new Vue({el: "#app",data: {msg: "message"},beforeCreate () {console.log("实例刚刚创建");console.log(this.msg);},created () {console.log("实例创建成功, data, methods已拥有");console.log(this.msg);},mounted () {console.log("页面已被vue实例渲染, data, methods已更新");}// 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
})

六、Vue指令

1.文本相关指令

<div id="app"><!-- 插值表达式 --><p>{{ msg }}</p><!-- eg:原文本会被msg替换 --><p v-text='msg'>原文本</p><!-- 可以解析带html标签的文本信息 --><p v-html='msg'></p><!-- v-once控制的标签只能被赋值一次 --><p v-once>{{ msg }}</p>
</div>
<script type="text/javascript">// 指令: 出现在html标签中可以被vue解析处理的全局属性new Vue({el: "#app",data: {msg: "message"}})
</script>

2.斗篷指令

<style type="text/css">[v-cloak] { display: none; }
</style>
<div id="app" v-cloak>{{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">new Vue({el: "#app",data: {msg: "message"}})
</script>
<!-- 避免页面闪烁-->

3.属性指令

<!-- 给自定义全局属性绑定变量 -->
<p v-bind:abc="abc"></p>
<!-- 以原字符串形式绑定全局属性 -->
<p v-bind:title="'abc'"></p><!-- 单类名绑定 -->
<p v-bind:class="c1"></p>
<!-- 多类名绑定 -->
<p v-bind:class="[c2, c3]"></p>
<!-- 类名状态绑定 -->
<p v-bind:class="{c4: true|false|var}"></p>
<!-- 多类名状态绑定 -->
<p v-bind:class="[{c5: true}, {c6: flase}]"></p><!-- 样式绑定 -->
<div :style="div_style"></div>
<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
<script type="text/javascript">new Vue({el:"#app",data: {abc: "abc",c1: "p1",c2: "p2",c3: "p3",div_style: {width: "200px",height: "200px",backgroundColor: "cyan"}}})
</script>
<!-- v-bind: 指令可以简写为 : -->

<body><div id="app"><!-- v-bind:属性 = "变量" --><!-- 如果abc自定义属性被v-bind:指令绑定了,后面的值也会成为vue变量, 如果就想是普通字符串, 再用''包裹 --><!-- : 就是 v-bind: 的简写方式 (1.常用 2.一定且只操作属性)--><p v-bind:abc="'abc'" v-bind:title="h_info" :def="hehe">abc</p><!--最常用的两个属性 class | style--><!--class--><p :class="a"></p> <!-- 单类名 --> <p :class="[a, b]"></p> <!-- 多类名 --><p :class="{c: d}"></p> <!-- 了解: c为类名,是否起作用取决于d值为true|false 开关类名 --><!--style--><p :style="s1"></p> <!-- s1为一套样式 --> <p :style="[s1, s2, {textAlign: ta}]">12345</p><!-- 了解: s1,s2均为一套样式, ta是一个变量,专门赋值给textAlign("text-align") --> </div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el: "#app",data: {h_info: "悬浮提示",hehe: "呵呵",a: 'active',b: 'rule',d: false,s1: { // 样式1: 值1, ..., 样式n: 值n
                width: '200px',height: '200px',background: 'red'},s2: {borderRadius: '50%'},ta: 'center'}})
</script>

4.事件指令

<!-- v-on: 指令 简写 @ -->
<!-- 不传参事件绑定，但事件回调方法可以获取事件对象 -->
<p @click="fn"></p>
<!-- ()可以传入具体实参 -->
<p @click="fn()"></p>
<!-- ()情况下，事件对象应该显式传入 -->
<p @click="fn($event)"></p>

<body><div id="app"><!-- v-on:事件 = "变量 简写 @ --><!-- 事件绑定的变量可以在data中赋值,但建议在methods中赋值 --><p v-on:click="fn1">11111111111111</p><p @click="fn2">22222222222222</p><!--vue事件的绑定可以传自定义参数--><p @click="fn3(333)">3333333333333333</p><!--vue事件的绑定不传自定义参数, 默认将事件对象传过去了--><p @click="fn4">4444444444444444</p><!--vue事件的绑定传自定义参数, 还要将事件对象传过去了, 要明确传$event--><p @click="fn5(555, $event)">5555555555555555</p></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el: "#app",data: {// 事件在data中提供一个函数地址,可以实现事件
            fn1: function () {console.log("11111111111111")}},// 事件尽量(要求)都放在vue实例的methods中
        methods: {fn2: function () {console.log("22222222222222")},fn3 (arg) {  // ES6语法
                console.log(arg)},fn4: function (ev) {console.log(ev)},fn5: function (arg, ev) {console.log(arg)console.log(ev)},}})
</script>

5.表单指令

<div id="app"><!-- v-model针对于表单元素 --><form action="" method="get"><!-- 1、双向绑定：服务于文本输入框 --><!-- v-model存储的值为输入框的value值 --><div><input type="text" name="usr" v-model="in_val"><input type="password" name="ps" v-model="in_val" ><textarea name="info" v-model="in_val"></textarea></div><!-- 2、单选框 --><div><!-- 单选框是以name进行分组，同组中只能发生单选 --><!-- v-model存储的值为单选框的value值 -->男：<input type="radio" name="sex" value="男" v-model="ra_val">女：<input type="radio" name="sex" value="女" v-model="ra_val">{{ ra_val }}</div><!-- 3、单一复选框 --><!-- v-model存储的值为true|false --><!-- 或者为自定义替换的值 --><div><input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />{{ sin_val }}</div><!-- 4、多复选框 --><!-- v-model存储的值为存储值多复选框value的数组 --><div><input type="checkbox" value="喜好男的" name="cless" v-model='more_val' /><input type="checkbox" value="喜好女的" name="cless" v-model='more_val' /><input type="checkbox" value="不挑" name="cless" v-model='more_val' />{{ more_val }}</div></form>
</div><script type="text/javascript">new Vue({el: '#app',data: {in_val: '',// 默认值可以决定单选框默认选项
            ra_val: '男',// 默认值为true，单一复选框为选中，反之false为不选中
            sin_val: '',// 数组中存在的值对应的复选框默认为选中状态
            more_val: ['喜好女的','不挑']}})
</script>

6.条件指令

<div id="app"><button @click="toggle">显隐切换</button><!-- v-if --><div class="box r" v-if="isShow"></div><!-- v-show --><div class="box o" v-show="isShow"></div><!-- 1.条件渲染的值为true|false --><!-- 2.true代表标签显示方式渲染 --><!-- 3.false v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示 --><!-- v-if v-else-if v-else 案例 --><ul><li @mouseover="changeWrap(0)">red</li><li @mouseover="changeWrap(1)">green</li><li @mouseover="changeWrap(2)">blue</li></ul><!-- red页面逻辑结构 --><div class="wrap red" v-if="tag == 0" key="0">...</div><!-- green页面逻辑结构 --><div class="wrap green" v-else-if="tag == 1" key="1">...</div><!-- blue页面逻辑结构 --><div class="wrap blue" v-else key="2">...</div><!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 --><!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 --><!-- v-show 案例 --><ul><li @mouseover="changeMain(0)">red</li><li @mouseover="changeMain(1)">green</li><li @mouseover="changeMain(2)">blue</li></ul><!-- red页面逻辑结构 --><div class="main red" v-show="whoShow(0)">...</div><!-- green页面逻辑结构 --><div class="main green" v-show="whoShow(1)">...</div><!-- blue页面逻辑结构 --><div class="main blue" v-show="whoShow(2)">...</div>
</div>
<script type="text/javascript">new Vue({el: "#app",data: {isShow: false,tag: 0,flag: 0},methods: {toggle () {this.isShow = !this.isShow;},changeWrap (num) {this.tag = num;},changeMain (num) {// this.flag numthis.flag = num;},whoShow (num) {// this.flag numreturn this.flag == num;}}})
</script>

7.循环指令

<div id="app"><h1>{{ msg }}</h1><!-- v-for="item in items" --><!-- 遍历的对象: 数组[] 对象(字典){} --><ul><li>{{ list[0] }}</li><li>{{ list[1] }}</li><li>{{ list[2] }}</li><li>{{ list[3] }}</li><li>{{ list[4] }}</li></ul><!-- n为遍历的元素值 --><ul><li v-for="n in list">{{ n }}</li></ul><!-- 一般列表渲染需要建立缓存 --><!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理 --><!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二个为元素索引 --><ul><li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li></ul><ul><li>{{ dic['name'] }}</li><li>{{ dic.age }}</li><li>{{ dic.gender }}</li></ul><!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 --><ul><li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li></ul><!-- 遍历的嵌套 --><div v-for="(person, index) in persons" :key="index" style="height: 21px;"><div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }}&nbsp;&nbsp;&nbsp;</div></div>
</div>
<script type="text/javascript">new Vue({el: "#app",data: {msg: "列表渲染",list: [1, 2, 3, 4, 5],dic: {name: 'zero',age: 88888,gender: 'god'},persons: [{name: "zero", age: 8},{name: "egon", age: 78},{name: "liuXX", age: 77},{name: "yXX", age: 38}]}})
</script>

8.todolist案例

<div id="app"><div><input type="text" v-model="val"><button type="button" @click="submitMsg">提交</button></div><ul><li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li></ul>{{ list }}
</div>
<script type="text/javascript">new Vue({el: "#app",data: {val: "",list: []},methods: {submitMsg () {if (this.val) {this.list.push(this.val);this.val = ""}},removeMsg(index) {this.list.splice(index, 1)}}})
</script>

七、组件

1.什么是组件

每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点
每个组件模板只能拥有一个根标签
子组件的数据具有作用域，以达到组件的复用

2.根组件

<div id="app"><h1>{{ msg }}</h1>
</div>
<script type="text/javascript">// 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)// 每个组件组件均拥有模板,templatevar app = new Vue({// 根组件的模板就是挂载点el: "#app",data : {msg: "根组件"},// 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量// 显式书写模块,就会替换挂载点,但根组件必须拥有挂载点template: "<div>显式模板</div>"})// app.$template
</script>

3.局部组件

<div id="app"><local-tag></local-tag><local-tag></local-tag>
</div>
<script>var localTag = {data () {return {count: 0}},template: '<button @click="btnAction">局部{{ count }}</button>',methods: {btnAction () {this.count ++}}}new Vue({el: "#app",components: {'local-tag': localTag}})
</script>

4.全局组件

<div id="app"><global-tag></global-tag><global-tag></global-tag>
</div>
<script>Vue.component('global-tag', {data () {return {count: 0}},template: '<button @click="btnAction">全局{{ count }}</button>',methods: {btnAction () {this.count ++}}})new Vue({el: "#app"})
</script>

5.父组件传递数据给子组件

通过绑定属性的方式进行数据传递

采用属性绑定的方式
1,父级提供数据
2.绑定给子组件的自定义属性
3.子组件通过props的数组拿到自定义属性从而拿到数据

<div id="app"><global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
</div>
<script type="text/javascript">Vue.component('global-tag', {props:['sup_data1', 'supdata2'],template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'})new Vue({el: '#app',data: {sup_data1: '数据1',sup_data2: '数据2'}})
</script>

6.子组件传递数据给父组件

通过发送事件请求的方式进行数据传递

采用发生事件的方式:
1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据)
2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据)
3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据

<div id="app"><global-tag @send_action='receiveAction'></global-tag>
</div>
<script type="text/javascript">Vue.component('global-tag', {data () {return {sub_data1: "数据1",sub_data2: '数据2'}},template: '<div @click="clickAction">发生</div>',methods: {clickAction () {this.$emit('send_action', this.sub_data1, this.sub_data2)}}})new Vue({el: '#app',methods: {receiveAction (v1, v2) {console.log(v1, v2)}}})
</script>

7.父子组件实现todolist

<div id="app"><div><input type="text" v-model="val"><button type="button" @click="submitMsg">提交</button></div><ul><!-- <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li> --><todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action="delect_action"></todo-list></ul>
</div>
<script type="text/javascript">Vue.component("todo-list", {template: "<li @click='delect_action'><span>第{{ i + 1 }}条: </span><span>{{ v }}</span></li>",props: ['v', 'i'],methods: {delect_action () {this.$emit("delect_action", this.i)}}})new Vue({el: "#app",data: {val: "",list: []},methods: {submitMsg () {// 往list中添加input框中的valueif (this.val) {this.list.push(this.val);this.val = ""}},delect_action(index) {this.list.splice(index, 1)}}})
</script>

八、Vue-CLI项目搭建

1.环境搭建

1.安装node.js

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2.安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v 查看cnpm 安装是否成功

3.安装脚手架

cnpm install -g @vue/cli

4.清空缓存处理

npm cache clean --force

2.项目的创建

1.创建项目

vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件

2.启动、停止项目

npm run serve / ctrl+c
// 要提前进入项目根目录

3.打包项目

npm run build
// 要在项目根目录下进行打包操作

3.认识项目

1.项目目录

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方-- assets:资源-- components:组件-- views:视图组件-- App.vue:根组件-- main.js: 入口js-- router.js: 路由文件-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)

2.配置文件：vue.config.js

module.exports={devServer: {port: 8888}
}
// 修改端口,选做

3.main.js

new Vue({el: "#app",router: router,store: store,render: function (h) {return h(App)}
})

4.后缀名为vue文件

<template><!-- 模板区域 -->
</template>
<script>// 逻辑代码区域// 该语法和script绑定出现export default {}
</script>
<style scoped>/* 样式区域 *//* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>

4.项目功能

1.vue-router

{path: '/',name: 'home',// 路由的重定向redirect: '/home'
}{// 一级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签path: '/one-view',name: 'one',component: () => import('./views/OneView.vue')
}{// 多级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签path: '/one-view/one-detail',component: () => import('./views/OneDetail.vue'),// 子路由, 在所属路由指向的组件中被渲染, 替换该组件(OneDetail)的<router-view/>标签children: [{path: 'show',component: () => import('./components/OneShow.vue')}]
}

<!-- router-link渲染为a标签 -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="{name: 'one'}">One</router-link> |<!-- 为路由渲染的组件占位 -->
<router-view />

a.router-link-exact-active {color: #42b983;
}

// router的逻辑转跳
this.$router.push('/one-view')// router采用history方式访问上一级
this.$router.go(-1)

2.vuex

// 在任何一个组件中,均可以通过this.$store.state.msg访问msg的数据
// state永远只能拥有一种状态值
state: {msg: "状态管理器"
},
// 让state拥有多个状态值
mutations: {// 在一个一个组件中,均可以通过this.$store.commit('setMsg', new_msg)来修改state中的msgsetMsg(state, new_msg) {state.msg = new_msg}
},
// 让mutations拥有多个状态值
actions: {}

3.vue-cookie

// 安装cookie的命令
// npm install vue-cookie --save
// 为项目配置全局vue-cookie
import VueCookie from 'vue-cookie'
// 将插件设置给Vue原型,作为全局的属性,在任何地方都可以通过this.$cookie进行访问
Vue.prototype.$cookie = VueCookie

// 持久化存储val的值到cookie中
this.$cookie.set('val', this.val)
// 获取cookie中val字段值
this.$cookie.get('val')

4.axios

// 安装 axios(ajax)的命令
// npm install axios--save
// 为项目配置全局axios
import Axios from 'axios'
Vue.prototype.$ajax = Axios

let _this = this
this.$ajax({method: 'post',url: 'http://127.0.0.1:5000/loginAction',params: {usr: this.usr,ps: this.ps}
}).then(function(res) {// this代表的是回调then这个方法的调用者(axios插件),也就是发生了this的重指向// 要更新页面的title变量,title属于vue实例// res为回调的对象,该对象的data属性就是后台返回的数据_this.title = res.data
}).catch(function(err) {window.console.log(err)
})

# 用pycharm启动该文件模拟后台
from flask import Flask, request, render_template
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)@app.route('/')
def index():return "<h1>主页</h1>"@app.route('/loginAction', methods=['GET', 'POST'])
def test_action():# print(request.args)# print(request.form)# print(request.values)usr = request.args['usr']ps = request.args['ps']if usr != 'abc' or ps != '123':return 'login failed'return 'login success'if __name__ == '__main__':app.run()

转载于:https://www.cnblogs.com/angelyan/p/10376049.html

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

swoole-环境搭建及扩展安装教程
swoole-环境搭建及扩展安装教程第一章环境搭建及扩展安装第一章环境搭建及扩展安装环境说明：系统：Ubuntu14.04 （安装教程包括CentOS6.5） PHP版本：PHP-5.5.10 swoole版本：1.7.6-stable ####PHP安装要用swoole，首先需要有PHP环境。由于swoole的某些特性，最好是能够…...
2024/5/7 0:08:32
最大开源软件公司卖了 340 亿美元，免费是如何变成一门生意的？
IBM 上周日宣布了自己史上最大一笔收购——340 亿美元买下红帽（Red Hat）。IBM 买公司不足为奇，这家公司的大转型基本都离不开收购。但 Red Hat 是全球最大的 Linux 开源系统开发商，它的操作系统不像微软 Windows 每台收取数十美元授权费。与免费相伴左右的开源生意卖了 340…...
2024/4/24 22:44:25
TFS2010安装图解
TFS2010安装环境是操作系统为Windows Server 2003 SP2(X86)，Windows Server 2003 R2(X86)，Windows Server 2003 R2 SP2(X86)，Windows Server2008，Windows Server 2008 R2。必备组件为：IIS，SQL Server 2008，SharePoint(Windows SharePoint Services 3.0)。只要安装完系…...
2024/4/24 22:44:24
熊猫烧香病毒完整解决方案
这个方案也广为传播，传播组真是好样的熊猫烧香病毒无疑成了近期互联网最热门的关键字了，网上也能找到很多个有关熊猫烧香病毒的解决办法，这些方法不尽完美，再加上熊猫的变种很多，很多方法已经失效。这里提供一个相对完整的方案供大家参考。病毒名：中文名：熊猫烧香病毒（…...
2024/4/24 22:44:22
PowerShell 2.0实践（十）管理TFS 2010 (1)
近日工作中设计了一套TFS自定义流程，使用了一些命令行工具，这两天看了看TFS 2010 中的PowerShell支持，特地总结一下，熟练使用这些命令行工具可以完成一些高级任务。测试脚本下载本系列所有脚本均在Windows Server 2008 R2 DataCenter (PowerShell 2.0) + PowerGUI Script E…...
2024/4/24 22:44:28
swoole框架快速入门
swoole有两个部分。一个是PHP扩展，用C开发的，这是核心。另一个是框架，像yii、TP、Laravel一样，是PHP代码写的。 swoole扩展本身提供了web服务器功能，可以替代php-fpm。而如果仅仅用swoole框架，可以像其它PHP框架一样，运行在nignx、apache等web服务器中。 swoole框架像…...
2024/4/24 22:44:20
开源软件新时代：55个经典开源Wind…
开源软件新时代：55个经典开源Windows工具开放源代码软件已经成为一个时髦的名词，这里有两个有力的证据：Firefox浏览器的下载人次超过了2500万；同时，基于Linux的Web服务器也占据了最大的市场份额。人们普遍相信，开放源代码软件（open-source software，简称OSS）要比专有软…...
2024/4/24 22:44:20
oracle 11g RAC crfclust.bdb过大的处理
早晨收到报警邮件，关于磁盘空间的。上去一块，是grid目录下面有一个大文件： crfclust.bdb，都快30G了。== check crsctl stat res ora.crf -init -t== stop crsctl stop res ora.crf -init== deleterm *.bdb== start crsctl start res ora.crf -init来自 “ ITPUB博客 ” ，链…...
2024/5/4 5:38:23
熊猫烧香病毒源码及分析
今天在OSC看到有人共享熊猫烧香的源码，用Delphi写的，真的是跨平台啊，犹对Japanese操作系统破坏最甚，字里行间留露出作者的愤青情绪啊，大体的看了下，主要是通过拷贝到Windows系统目录中，注册表添加自启动的蠕虫病毒，通过VB调用Windows的Outlook发送邮件，进而达到传播病…...
2024/5/3 23:27:34
前端之 Vue初试
文章目录Vue简介Vue事件实例数据 data方法 methods计算 computed监听 watch分隔符delimiters生命周期钩子Vue指令文本操作指令斗篷指令属性指令事件指令表单指令条件渲染指令循环指令组件根组件局部组件全局组件父组件传递数据给子组件子组件传递数据给父组件父子组件实现todoL…...
2024/4/24 22:44:24
vue详解及安装
Vue渐进式 JavaScript 框架通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目一、走进Vue1、what -- 什么是Vue可以独立完成前后端分离式web项目的JavaScript框架2、why -- 为什么要学习Vue三大主流框架之一：Angular R…...
2024/5/6 19:39:45
熊猫烧香病毒分析报告
1．样本概况1.1 样本信息（1）病毒名称：spo0lsv.exe（2）所属家族：熊猫烧香（3）MD5值：B8F8E75C9E77743A61BBEA9CCBCFFD5D（4）SHA1值：188FC8FC580C0EA4BF8A8900A3D36471823C8923（5）CRC32：E63D45D3（6）病毒行为：复制自身到系统目录下设置文件属性为隐藏，并且让用户无…...
2024/4/23 11:52:17
php安装swoole扩展教程(centos8)
首先找到swoole扩展包的地址： https://pecl.php.net/package/swoole里面有swoole的各种版本，选择一个下载，我下载的是4.0.3 执行命令： wget -c https://pecl.php.net/get/swoole-4.0.3.tgz 之后，swoole扩展就下载下来了， 2.解压 tar -zvxf swoole-4.0.3.tgz目录切换到解压…...
2024/4/14 21:34:47
svn配置中，FSFS与BDB的区别
文章来源：http://blog.csdn.net/yongheshangyu/archive/2008/07/12/2641379.aspxBDB与FSFS是两种不同的数据存储方式； BDB 即：Berkeley DB优缺点：优点：1.真正的事物支持 a进程正对数据进行操作，此时b进程也要对数据进行操作，则b看到的数据就不是一个静态的视图，此时，…...
2024/4/26 17:29:36
Linux开源系统对比Windows闭源系统的优势解析
当我们听到linux的时候是不是觉得高大上的感觉呢？在我刚上大学的时候，听着学长们给我讲他们的大学的学习经历，先学习C语言、单片机、然后做一些项目，现在正学习linux操作系统，当我听到linux操作系统的时候，我就呆了一下，只是听过windows操作系统，还用的不好，这linux操…...
2024/5/6 5:53:16
关于修改TFS2010的密码
在团队开发中使用TFS2010，你会遇到这样的问题，由于TFS的用户账户属于Windows的用户，每个成员需要修改密码必须到服务器上修改Windows账户密码，这样很不方便。其实可以在本地直接修改，必须你已经登录，在开始-运行-rundll32 netplwiz.dll,UsersRunDll，打开用户账户界面，…...
2024/4/29 13:17:50
Vue-基础
Vue 渐进式 JavaScript 框架通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目一、走进Vue 1、what – 什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架2、why – 为什么要学习Vue 三大主流框架之一：Angu…...
2024/5/2 23:21:00
checking if Berkeley DB version supported by BDB/HDB backends... yes **checking for Berkeley DB link
参考：http://better.blog.51cto.com/1886029/1285710 checking if Berkeley DB version supported by BDB/HDB backends... yes **checking for Berkeley DB link (default)... no configure: error: BDB/HDB: BerkeleyDB not available ldap安装的时候报这个错，是因为barker…...
2024/5/5 2:10:44
MapInfo、ArcGIS 狙击战 1
一、用户手册（User Manual）：个人认为“用户手册”是学习、使用一个东西最好的资料。功能 ArcGIS MapInfo 文档组织典型的高大全只有一个系统最低配置无有易用性差好《Using_ArcMap》更象一个600页的英文广告，给人们展现一个美好的画卷。咬牙看完（英 …...
2024/5/6 11:20:04
国内外开源软件的现状
据欧盟首个对开源软件产业的研究报告——《开源对欧盟软件通信产业竞争力和创新的影响》，目前全球接触和应用开源软件的企业占到了总数的50%以上，而美国则高达80%～90%。目前欧盟企业大约投入了12亿欧元进行开源软件的开发，从而为市场提供了56.5万个就业机会和2630亿欧元（约…...
2024/5/5 5:53:25

Vue的简单入门

Vue的简单入门

一、什么是Vue？

二、为什么要学习Vue

三、如何在页面中使用Vue

四、Vue实例

1.el：实例

2.data：数据

3.methods：方法

4.computed：计算

5.watch：监听

五、生命周期钩子

六、Vue指令

1.文本相关指令

2.斗篷指令

3.属性指令

4.事件指令

5.表单指令

6.条件指令

7.循环指令

8.todolist案例

七、组件

1.什么是组件

2.根组件

3.局部组件

4.全局组件

5.父组件传递数据给子组件

6.子组件传递数据给父组件

7.父子组件实现todolist

八、Vue-CLI项目搭建

1.环境搭建

2.项目的创建

3.认识项目

4.项目功能

相关文章

最新文章

Vue的简单入门

Vue的简单入门

一、什么是Vue？

二、为什么要学习Vue

三、如何在页面中使用Vue

四、Vue实例

1.el：实例

2.data：数据

3.methods：方法

4.computed：计算

5.watch：监听

五、生命周期钩子

六、Vue指令

1.文本相关指令

2.斗篷指令

3.属性指令

4.事件指令

5.表单指令

6.条件指令

7.循环指令

8.todolist案例

七、组件

1.什么 是组件

2.根组件

3.局部组件

4.全局组件

5.父组件传递数据给子组件

6.子组件传递数据给父组件

7.父子组件实现todolist

八、Vue-CLI项目搭建

1.环境搭建

2.项目的创建

3.认识项目

4.项目功能

相关文章

最新文章

1.什么是组件