vue 组入html,Vue 01-基础入门-引入到Html中

一、传统开发方式引入vue.js

Vue

{{ message }}

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

二、vue指令

指令是带有v-表达式，当表达式改变后将响应式的影响所作用的DOM。

v-once：在标签里添加这个指令后，标签包裹的变量只会变一次。

{{message}}

v-html：使用个指令后，指定的变量将会在输出Html渲染后的内容，而非普通文本

v-if：根据表达式的真假来插入/移除所作用的元素，

现在你看到了我

v-show：同v-if类似，但是标签无论是否显示，始终渲染并存在，可同v-else-if ，v-else组合使用。

v-bind：可简写为:，为标签内的属性绑定动态变量，

v-on：可简写为@该指令用来监听 DOM 事件，并在触发时运行指定函数或js代码。Add 1，使用.stop事件后，将不会将事件影响到其他domAdd 1

v-for：

三、表单双向绑定

v-model：此指令在、、等表单标签上创建双向数据绑定

data: {

message: 'Hello Vue!'

}

v-model

四、组件

组件是可复用的vue实例，使用Vue.component函数创建全局组件，props定义属性，data定义数据，template定义模板。

组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

组件可以给标签自定义属性，即prop，可以通过 Prop 向子组件传递数据。

插槽用来向组件传递内容，将标签放在模板里，可以在引用组件时，组件中间写任意的html标签或文本进行替换。

一个组件的模板必须只能有一个根节点。

1. 全局注册

Document

我是slot插槽

Vue.component('button-counter', {

props: ["tit"],

data: function () {

return {

count: 0

}

},

template: '

{{tit}}点我{{count}}

'

})

var vm = new Vue({

el: "#app",

data: {},

methods: {},

});

2. 局部注册

Document

var vm = new Vue({

el: "#app",

data: {},

methods: {},

components: {

testComponent: "

h2...

",

methods: {

},

}

});

组件文件，需要在vue脚手架里使用

创建自定义的test.vue组件

h2...

export default {

name: 'test',

props:{

msg:{

type:String,

default:"test msg"

}

},

data(){

},

methods:{

}

}

.red{color: red;}

在根组件App.vue里：导入、注册、引用。

import Test from './components/test.vue'

export default {

name: 'App',

components: {

Test

}

}