vue.js
- What is Vue?
- A progressive
JavaScriptframework
- What is Vue used for?
- The effect is
构建用户界面
- What are the characteristics?
- Features are:,
渐进式only need to pay attention to data
Basic use
Mount point of vue
- 1. Mount point el function: tell the vue instance to which one you want to render the data in data
- 2. Precautions
- (1) The mount point can use id selector (vue recommended), class selector, label selector
- Basically, id selectors are used in development to ensure the uniqueness of HTML tags
- If you want the data in data to be effective for multiple elements, you can mount the vue instance to the parent element
- (2) If the selector selects multiple elements, only the first element will be selected (the bottom layer is queryselector)
- (3) The mount point cannot be set as the
htmlandbodylabel (the program reports an error)
- (1) The mount point can use id selector (vue recommended), class selector, label selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.HTML结构 -->
<div id="app">
<div id="app">
{
{
message }}
</div>
<hr>
<div id="box" class="container">
{
{
message }}
</div>
<hr>
<div class="container">
{
{
message }}
</div>
</div>
<script>
/* 3.初始化配置 */
/*
(1)Vue是导入vue.js之后得到的一个全局构造函数
(2)调用Vue构造函数 创建一个vue实例对象
*/
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
- el : element is used to set the mount point of the vue instance (which element to render the data to)
- data : the data to be rendered
- Data-driven: Vue will automatically render the page based on the data in data (no DOM operation required)
- methods : Save the methods in vue
Interpolation expression
Interpolation expression (template syntax) official website document portal
- Vue will automatically render the data in the data object to the view
- Note:
(1) { {}}: Interpolation expression, also called beard syntax
(2) Function of interpolation expression: Render data to the page
(3) Support binary operation { {age + 1 }}
(4) Support Ternary arithmetic { {age>30?'Old man':'小鲜肉' }}
(5) Support the value syntax of arrays and objects
(6) Does not support branch syntax and loop syntax
Vue common instructions
Vue command official website document portal
The essence of Vue instructions is: Vue adds some attributes to HTML tags
Every instruction in Vue starts with v- (used to distinguish native attributes of HTML tags)
